百度地圖多點+畫連接線+數字標注 · php開發筆記

``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html > <head> <title>（按鈕）</title> </head> <body > <div> <fieldset > （附近11） </fieldset> <fieldset> <div style="min-height: 400px; width: 100%;" id="map"> </div> <script type="text/javascript"> var map; //Map實例 //后臺傳過來 var currentLat = 116.345555; var currentLon = 40.018661; var my ={ title: "我的位置"}; var markerArr = [ { title: "1", point: "116.364531,40.057003"}, { title: "2",point: "116.340934,40.013401"}, { title: "3", point: "116.342213,40.041267"}, { title: "4", point: "116.342223,40.042267"}, { title: "5", point: "116.342233,40.043267"}, { title: "6", point: "116.352243,40.044267"}, { title: "7", point: "116.342253,40.045267"}, { title: "8", point: "116.342263,40.046267"}, { title: "9", point: "116.342273,40.047267"}, { title: "10", point: "116.342283,40.087267"}, { title: "11", point: "116.342293,40.097267"}, { title: "12", point: "116.442203,40.007267"} ]; function map_init() { map = new BMap.Map("map"); //第1步：設置地圖中心點，當前城市 var point = new BMap.Point(currentLat,currentLon); //第2步：初始化地圖,設置中心點坐標和地圖級別。 map.centerAndZoom(point, 14); //第3步：啟用滾輪放大縮小 map.enableScrollWheelZoom(true); //第4步：向地圖中添加縮放控件 var ctrlNav = new window.BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrlNav); //第5步：向地圖中添加縮略圖控件 var ctrlOve = new window.BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrlOve); //第6步：向地圖中添加比例尺控件 var ctrlSca = new window.BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrlSca); //第7步：繪制點 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]); } //繪制點 var points = new Array(); for (var i = 0; i < markerArr.length; i++) { var p0 = markerArr[i].point.split(",")[0]; var p1 = markerArr[i].point.split(",")[1]; var thePoint1 = new BMap.Point(p0, p1); points.push(thePoint1); } drawPolyline(map, points); // 添加信息窗口 function addInfoWindow(marker, poi) { // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫 var label = new window.BMap.Label(poi.title, { offset: new window.BMap.Size(2, 1) }); marker.setLabel(label); var clo=""; if("我的位置"==poi.title){ clo="#FF5782"; }else{ clo="#E6FED"; } label.setStyle({ color: "#fff", fontSize: "16px", backgroundColor: "0.05", border: "0", fontWeight: "bold" }); //maps.addOverlay(lab1); var info = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;color:"+clo+";’>" +poi.title+ "</p>"); // 創建信息窗口對象 marker.addEventListener("mouseover", openInfoWinFun); var openInfoWinFun = function () { this.openInfoWindow(info); }; } } // 添加標注 function addMarker(point, index) { index=11; 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 - index * 25) }); var marker = new BMap.Marker(point, { icon: myIcon }); map.addOverlay(marker); return marker; } //異步調用百度js function map_load() { var load = document.createElement("script"); load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init"; document.body.appendChild(load); } /** * 畫線 * @param bMap * @param points */ function drawPolyline(bMap, points) { if (points==null || points.length<=1) { return; } bMap.addOverlay(new BMap.Polyline(points, { strokeColor : "blue", strokeWeight : 3, strokeOpacity : 0.6 })); // 畫線 } window.onload = map_load; </script> </fieldset> </div> </body> </html> ```