碼上歡樂
相關內容    簡體    繁體

百度地圖API讀取后台數據中坐標點並顯示在web界面

本文轉載自   查看原文   2021-05-18 15:18   1137    基於遺傳算法的物流配送系統

題外話

做的一個項目，要用到百度地圖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&amp;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&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

有什么問題歡迎聯系我！！！
學生黨一枚，盡自己最大的可能幫忙。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 百度地圖-多個坐標點顯示 百度地圖的使用之獲取數據庫表中信息的坐標點顯示在地圖上 百度地圖API 地圖圈區域並計算坐標點是否在區域內 百度地圖API開發的快速使用和添加大量坐標點的幾種方法 百度地圖API 自定義坐標點及圖片 百度地圖Api 根據兩個坐標點計算距離 百度地圖-多個坐標點一起顯示（老大：張國輝） 百度地圖自助繪圖取坐標點 百度地圖動態添加軌跡坐標點 關於百度地圖API的地圖坐標轉換問題
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM