百度地图API读取后台数据中坐标点并显示在web界面
题外话
做的一个项目，要用到百度地图API，进行点坐标的显示和路线的规划。有什么不对的情况请多多指正。
开发前，要先去百度地图的官网上申请一个自己的AK，网址在这➡ https://lbsyun.baidu.com/。
我的想法是通过数据库传入json，通过解析json数据的内容以至于在前端显示出来。
地图demo
具体代码啦！！！
数据库连接代码
<%
String driverName = "com.mysql.jdbc.Driver";
String url = "jdbc:mysql://localhost:3306/db_cgwuliuxinxissm?useUnicode=true&characterEncoding=utf-8";
String username = "root";
String password = "root";
String lsCity = "";
Connection dbConn;
Class.forName(driverName);
dbConn = DriverManager.getConnection(url, username, password);
Statement stmt = dbConn
.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,
ResultSet.CONCUR_UPDATABLE);
String sql = "select shangpinName,shangpinJin,userName,shangpinLX,shangpinLY from t_shangpin ";
ResultSet rs = stmt.executeQuery(sql);
JSONObject json = new JSONObject();
JSONArray jsonMembers = new JSONArray();
while (rs.next()) {
JSONObject city1 = new JSONObject();
city1.put("shangpinName", rs.getString("shangpinName"));
city1.put("shangpinJin", rs.getDouble("shangpinJin"));
city1.put("userName", rs.getString("userName"));
city1.put("shangpinLX",rs.getDouble("shangpinLX"));
city1.put("shangpinLY",rs.getDouble("shangpinLY"));
jsonMembers.put(city1);
}
json.put("city", jsonMembers);
lsCity =jsonMembers.toString();
System.out.println(lsCity);
rs.close();
stmt.close();
dbConn.close();
%>
地图显示代码
<script>
//地图初始化
var map;
var map = new BMap.Map("main"); //创建地图对象
var point = new BMap.Point(123.414885,41.931849);//创建地图中心点坐标对象
map.centerAndZoom(point, 10); //设置初始化地图中心位置坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.enableKeyboard(); //键盘放大
//添加地图类型控件（地图/混合）
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]
}));
//城市定位
map.enableInertialDragging();
map.enableContinuousZoom();
var size = new BMap.Size(10, 20);
map.addControl(new BMap.CityListControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: size,
}));
//定位配送中心
// 123.414885,41.931849
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25), // 指定定位位置
imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移使用左侧的图片
// imageOffset: new BMap.Size(-20, 0 - 10 * 25) // 设置图片偏移使用右侧的图片0-x*25代表使用第x+1张图片
});
var points = new BMap.Point(123.414885,41.931849);
var marker1 = new BMap.Marker(points,{icon:myIcon});
map.addOverlay(marker1);
marker1.addEventListener("click", function(e){
addMarker1(marker1);
});
function addMarker1(data){
//重新创建经纬度坐标对象，防止覆盖
var points = new BMap.Point(123.414885,41.931849);
var size = new BMap.Size(0,-13);
var opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: data.userName, // 信息窗口标题
offset: size //增加偏移量
}
//创建信息窗口对象
var opts1 = {title : '<span style="font-size:20px;color:#0A8021">配送中心</span>'};
var infoWindow1 = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>配送中心信息: </b>"+ "沈阳航空航天大学配送中心"+"</br></a></div>", opts1);
//对标注对象和信息窗口进行绑定
map.openInfoWindow(infoWindow1, points);
}
function viewuserLocation(){
var ls_City = '<%=lsCity%>' ;
var objRecords = eval("(" + ls_City + ")");//后台得到的数据包含经纬度，json格式的
//document.write(objRecords[0]);
var points = new Array();//存放标注点经纬信息的数组
//循环取出对应数据
for(let i = 0;i<objRecords.length;i++){
var points = new BMap.Point(objRecords[i].shangpinLX,objRecords[i].shangpinLY); //创建经纬度坐标对象
var marker = new BMap.Marker(points); //创建标记对象
map.addOverlay(marker); //标记地图
//添加标记点击事件
marker.addEventListener("click",function(e){
addMarker(objRecords[i]);
});
}
}
// 编写自定义函数,绑定信息窗口
function addMarker(data){
//重新创建经纬度坐标对象，防止覆盖
var points = new BMap.Point(data.shangpinLX,data.shangpinLY);
var size = new BMap.Size(0,-13);
var opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: data.userName, // 信息窗口标题
offset: size //增加偏移量
}
//创建信息窗口对象
var opts1 = {title : '<span style="font-size:20px;color:#0A8021">客户信息</span>'};
var infoWindow = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>货物: </b>"+ data.shangpinName+ "</br><b>重量:</b>"+data.shangpinJin+"</br><b>用户: </b>"+data.userName+"</br></a></div>", opts1);
//对标注对象和信息窗口进行绑定
map.openInfoWindow(infoWindow, points);
}
</script>
整体代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="java.sql.*"%>
<%@ page import="org.json.*"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
String driverName = "com.mysql.jdbc.Driver";
String url = "jdbc:mysql://localhost:3306/db_cgwuliuxinxissm?useUnicode=true&characterEncoding=utf-8";
String username = "root";
String password = "fbl19980826";
String lsCity = "";
Connection dbConn;
Class.forName(driverName);
dbConn = DriverManager.getConnection(url, username, password);
Statement stmt = dbConn
.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,
ResultSet.CONCUR_UPDATABLE);
String sql = "select shangpinName,shangpinJin,userName,shangpinLX,shangpinLY from t_shangpin ";
ResultSet rs = stmt.executeQuery(sql);
JSONObject json = new JSONObject();
JSONArray jsonMembers = new JSONArray();
while (rs.next()) {
JSONObject city1 = new JSONObject();
city1.put("shangpinName", rs.getString("shangpinName"));
city1.put("shangpinJin", rs.getDouble("shangpinJin"));
city1.put("userName", rs.getString("userName"));
city1.put("shangpinLX",rs.getDouble("shangpinLX"));
city1.put("shangpinLY",rs.getDouble("shangpinLY"));
jsonMembers.put(city1);
}
json.put("city", jsonMembers);
lsCity =jsonMembers.toString();
System.out.println(lsCity);
rs.close();
stmt.close();
dbConn.close();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html {
height: 100%
}
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
height: 100%;
margin: 0px;
padding: 0px;
}
#menu {
padding: 5px 0px 0px 0px;
width: 100%;
height: 7%;
}
#main {
width: 100%;
float: left;
position: fixed;
height: 87%;
}
</style>
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=OX4uIhFIum52MwoijvtP7n8tkrmAjC7o"></script>
</head>
<body >
<div id="dlg-buttons">
<a href="javascript:viewuserLocation();" class ="easyui-linkbutton" iconCls="icon-reload" >显示客户位置</a>
</div>
<div id="dlg-buttons">
<a href="javascript:" class ="easyui-linkbutton" iconCls="icon-reload" >生成配送路线</a>
</div>
<div id ="main"></div>
</body>
<script>
//地图初始化
var map;
var map = new BMap.Map("main"); //创建地图对象
var point = new BMap.Point(123.414885,41.931849);//创建地图中心点坐标对象
map.centerAndZoom(point, 10); //设置初始化地图中心位置坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.enableKeyboard(); //键盘放大
//添加地图类型控件（地图/混合）
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]
}));
//城市定位
map.enableInertialDragging();
map.enableContinuousZoom();
var size = new BMap.Size(10, 20);
map.addControl(new BMap.CityListControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: size,
}));
//定位配送中心
// 123.414885,41.931849
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25), // 指定定位位置
imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移使用左侧的图片
// imageOffset: new BMap.Size(-20, 0 - 10 * 25) // 设置图片偏移使用右侧的图片0-x*25代表使用第x+1张图片
});
var points = new BMap.Point(123.414885,41.931849);
var marker1 = new BMap.Marker(points,{icon:myIcon});
map.addOverlay(marker1);
marker1.addEventListener("click", function(e){
addMarker1(marker1);
});
function addMarker1(data){
//重新创建经纬度坐标对象，防止覆盖
var points = new BMap.Point(123.414885,41.931849);
var size = new BMap.Size(0,-13);
var opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: data.userName, // 信息窗口标题
offset: size //增加偏移量
}
//创建信息窗口对象
var opts1 = {title : '<span style="font-size:20px;color:#0A8021">配送中心</span>'};
var infoWindow1 = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>配送中心信息: </b>"+ "沈阳航空航天大学配送中心"+"</br></a></div>", opts1);
//对标注对象和信息窗口进行绑定
map.openInfoWindow(infoWindow1, points);
}
function viewuserLocation(){
var ls_City = '<%=lsCity%>' ;
var objRecords = eval("(" + ls_City + ")");//后台得到的数据包含经纬度，json格式的
//document.write(objRecords[0]);
var points = new Array();//存放标注点经纬信息的数组
//循环取出对应数据
for(let i = 0;i<objRecords.length;i++){
var points = new BMap.Point(objRecords[i].shangpinLX,objRecords[i].shangpinLY); //创建经纬度坐标对象
var marker = new BMap.Marker(points); //创建标记对象
map.addOverlay(marker); //标记地图
//添加标记点击事件
marker.addEventListener("click",function(e){
addMarker(objRecords[i]);
});
}
}
// 编写自定义函数,绑定信息窗口
function addMarker(data){
//重新创建经纬度坐标对象，防止覆盖
var points = new BMap.Point(data.shangpinLX,data.shangpinLY);
var size = new BMap.Size(0,-13);
var opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: data.userName, // 信息窗口标题
offset: size //增加偏移量
}
//创建信息窗口对象
var opts1 = {title : '<span style="font-size:20px;color:#0A8021">客户信息</span>'};
var infoWindow = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>货物: </b>"+ data.shangpinName+ "</br><b>重量:</b>"+data.shangpinJin+"</br><b>用户: </b>"+data.userName+"</br></a></div>", opts1);
//对标注对象和信息窗口进行绑定
map.openInfoWindow(infoWindow, points);
}
</script>
</html>
相关jar包
里面的jar包我放到百度网盘里面了，需要自取
链接：https://pan.baidu.com/s/1pxKpRGXFN8YFt4zzdJkk9Q
提取码：code
有什么问题欢迎联系我！！！
学生党一枚，尽自己最大的可能帮忙。
