百度地图API读取后台数据中坐标点并显示在web界面

2024-01-16 19:40:22

题外话

做的一个项目，要用到百度地图API，进行点坐标的显示和路线的规划。有什么不对的情况请多多指正。
开发前，要先去百度地图的官网上申请一个自己的AK，网址在这➡ https://lbsyun.baidu.com/。
我的想法是通过数据库传入json，通过解析json数据的内容以至于在前端显示出来。

地图demo

百度地图API读取后台数据中坐标点并显示在web界面
百度地图API读取后台数据中坐标点并显示在web界面

具体代码啦！！！

数据库连接代码



<%
    String driverName = "com.mysql.jdbc.Driver";
			String url = "jdbc:mysql://localhost:3306/db_cgwuliuxinxissm?useUnicode=true&amp;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();
%>

地图显示代码


<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&amp;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

有什么问题欢迎联系我！！！ QQ：481232986
学生党一枚，尽自己最大的可能帮忙。

上一篇：LeetCode452. 用最少数量的箭引爆气球


下一篇：Unicode and UTF-8