百度地圖－修改marker圖示(icon)及同時顯示多點
阿新 • • 發佈：2019-02-16
當前位置需另行後臺傳入
<!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: "<span style="font-family: Arial, Helvetica, sans-serif;">華聯2</span><span style="font-family: Arial, Helvetica, sans-serif;">",point: "116.340934,40.013401"},</span> { title: "華潤3", point: "116.342213,40.047267"} ]; 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]); } //<span style="font-family: Arial, Helvetica, sans-serif;">第8步：</span><span style="font-family: Arial, Helvetica, sans-serif;">我的位置</span> var mymaker = addMarker(new window.BMap.Point(currentLat, currentLon), 10); addInfoWindow(mymaker, my); // 新增資訊視窗 function addInfoWindow(marker, poi) { marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫 var label = new window.BMap.Label(poi.title, { offset: new window.BMap.Size(20, -10) }); marker.setLabel(label); var clo=""; if("我的位置"==poi.title){ clo="#FF5782"; }else{ clo="#E6FED"; } 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) { 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); } window.onload = map_load; </script> </fieldset> </div> </body> </html>