百度地圖建立標記點
阿新 • • 發佈：2019-01-27
專案需求：專案需要從資料庫載入資料到百度地圖上，顯示未標記點。
js程式碼如下：
//建立地圖 function showMap(){ map = new BMap.Map("information_date",{minZoom:6,maxZoom:17}); // 建立地圖例項 map.centerAndZoom(city,14); // 初始化地圖,設定中心點座標和地圖級別。 map.enableScrollWheelZoom(true); //啟用滾輪放大縮小 //向地圖中新增縮放控制元件 var ctrlNav = new window.BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrlNav); //向地圖中新增比例尺控制元件 var ctrlSca = new window.BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrlSca); } //地圖上建立自定義覆蓋物，顯示資訊 function showBusiness_hall(markerArr){ //marjerArr為資料庫查詢的資料 // 建立圖示物件 var myIcon = new BMap.Icon(hall, new BMap.Size(36, 40), {//是引用圖示的名字以及大小，注意大小要一樣，hall：表示圖片 anchor: new BMap.Size(10, 30)//這句表示圖片相對於所加的點的位置 }); var point = new Array(); //存放標註點經緯資訊的陣列 var marker = new Array(); //存放標註點物件的陣列 for (var i = 0; i < markerArr.length; i++){ var p0 = markerArr[i].longitude; // var p1 = markerArr[i].latitude; //按照原陣列的point格式將地圖點座標的經緯度分別提出來 var businesshallName = markerArr[i].businesshallName;//資料庫資料 var adress = markerArr[i].adress;//資料庫資料 point[i] = new window.BMap.Point(p0, p1); //迴圈生成新的地圖點 marker[i] = new window.BMap.Marker(point[i]); //按照地圖點座標生成標記 var label = new BMap.Label(p0+p1,{offset:new BMap.Size(20,-10)});//設定lable標籤 map.addOverlay(marker[i]); //地圖上呈現標記 marker[i].setIcon(myIcon);//放圖示 marker[i].setLabel(label); label.setStyle({ //給label設定樣式，任意的CSS都是可以的 display:"none" }); var content = "<p style=’font-size:12px;lineheight:1.8em;’>營業廳資訊：" + businesshallName + "</br>地址：" + adress + "</br></p>"; addClickHandler(content,marker[i]);//新增監聽事件 } } /** * 新增監聽事件 */ function addClickHandler(content,marker){ marker.addEventListener("click",function(e){ openInfo(content,e) }); } /** * 建立資訊視窗 */ function openInfo(content,e){ var opts = { width: 250, //資訊視窗寬度 height: 150, //資訊視窗高度 title: "海潤" //資訊視窗標題 } var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow = new BMap.InfoWindow(content,opts); // 建立資訊視窗物件 map.openInfoWindow(infoWindow,point); //開啟資訊視窗 } /** * 顯示具體的位置,設定為中心點 */ function showSpecificPostion(markerArr){ var p0 = markerArr[0].longitude; // var p1 = markerArr[0].latitude; //按照原陣列的point格式將地圖點座標的經緯度分別提出來 map.centerAndZoom(new BMap.Point(p0, p1), 16); // 初始化地圖,設定中心點座標和地圖級別 deletePoint(p0+p1);//刪除該經緯度上的覆蓋物 } /** * 刪除固定點的覆蓋物 */ function deletePoint(point){ var allOverlay = map.getOverlays(); for (var i = 0; i < allOverlay.length -1; i++){ if(allOverlay[i].getLabel().content == point){ map.removeOverlay(allOverlay[i]); return false; } } } /** * 清除地圖所有覆蓋物 */ function delelctOverlay(){ map.clearOverlays(); } /** * 地圖圖示跳動 */ function showAnimation(marker){ marker[0].setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫 }
jsp程式碼如下：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=金鑰"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script> <script type="text/javascript"> var path = "<%=request.getContextPath()%>"; var hall = "<%=request.getContextPath()%>/common/my_resource/picture/hall.png"; </script> </head> <body style="height:100%; width:100%"> <!-- 資料div --> <div id="information_date" ></div> </body>