java 使用百度地圖顯示多個標註點帶彈出資訊框
阿新 • • 發佈：2018-12-19
直接上程式碼
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } #map { width: 100%; height: 100%; } </style> </head> <body> <div id="map"></div> <canvas id="canvas"></canvas> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script> <script type="text/javascript" src="https://mapv.baidu.com/build/mapv.js"></script> <script type="text/javascript" src="/super/js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("map", { enableMapClick: false }); // 建立Map例項 map.centerAndZoom(new BMap.Point(120.107124, 30.873583), 13); // 初始化地圖,設定中心點座標和地圖級別 map.enableScrollWheelZoom(true); // 開啟滑鼠滾輪縮放 map.setMapStyle({ // style: 'light' }); //根據自己的需要修改，這裡是動態顯示標註點，從後臺傳一個json串到前臺，參考上一篇文章 var myobj=eval(${cityBasicList}); //標註個數 var randomCount = myobj.length; var data = []; var markerArr = []; $.each(myobj,function(i,val){ markerArr.push({ title: "名稱："+val.cityname, point: val.lng+","+val.lat, address: val.addr },); }); for (var i = 0; i < markerArr.length; i++) { var p0 = markerArr[i].point.split(",")[0]; var p1 = markerArr[i].point.split(",")[1]; var maker = addMarker(new window.BMap.Point(p0, p1), i); addInfoWindow(maker, markerArr[i], i); } // 新增標註 function addMarker(point, index) { var myIcon = new BMap.Icon("/super/pages/assist/img/markers.png", new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), imageOffset: new BMap.Size(0, -275) }); var marker = new BMap.Marker(point, { icon: myIcon }); map.addOverlay(marker); return marker; } // 新增資訊視窗 function addInfoWindow(marker, poi) { //pop彈窗標題 var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '</div>'; //pop彈窗資訊 var html = []; html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>'); html.push('<tr>'); html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>'); html.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' </td>'); html.push('</tr>'); html.push('</tbody></table>'); var infoWindow = new BMap.InfoWindow(html.join(""), { title: title, width: 200 }); var openInfoWinFun = function () { marker.openInfoWindow(infoWindow); }; marker.addEventListener("click", openInfoWinFun); return openInfoWinFun; } // 構造資料 for (var i = 0; i < randomCount; i++) { data.push({ geometry: { type: 'Point', coordinates: [myobj[i].lng, myobj[i].lat] //X、Y軸座標 }, name: myobj[i].cityname }); } var dataSet = new mapv.DataSet(data); var options = { fillStyle: 'rgba(255, 50, 50, 0.6)', shadowColor: 'rgba(255, 50, 50, 1)', shadowBlur: 30, globalCompositeOperation: 'lighter', methods: { click: function (item) { //點選事件 } }, size: 5, draw: 'simple' } var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options); //dataSet.set(data); // 修改資料 // mapvLayer.show(); // 顯示圖層 // mapvLayer.hide(); // 刪除圖層 </script> </body> </html>
這是比較簡答的方法，但是標註點數不能過多，太多就直接卡死，需要海量標註點就把上面程式碼資訊顯示層去掉就可以了