這是一個多座標創建,並連線,和信息顯示的例子
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html, #allmap { width: 100%; height: 100%; overflow: hidden; margin: 0; font-family: "微軟雅黑"; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E06eb9d756d0eafc722effb355657b4c"></script> <title></title> </head> <body> <div> <div style="min-height: 800px; 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",name:"這是一個標題", content:"這是內容" }, { title: "2", point: "116.340934,40.013401", name: "這是一個標題", content: "這是內容" }, { title: "3", point: "116.342213,40.041267", name: "這是一個標題", content: "這是內容" }, { title: "4", point: "116.342223,40.042267", name: "這是一個標題", content: "這是內容" }, { title: "5", point: "116.342233,40.043267", name: "這是一個標題", content: "這是內容"}, ]; 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], markerArr[i].name, markerArr[i].content); } //繪製點 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,name, content) { // 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); addClickHandler(name,content, marker); } } function addClickHandler(name,content, marker) { marker.addEventListener("click", function (e) { openInfo(name,content, e) } ); } function openInfo(name,content, e) { var opts = { width: 250, // 信息窗口寬度 height: 80, // 信息窗口高度 title: name, // 信息窗口標題 enableMessage: true//設置允許信息窗發送短息 }; 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 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() { map_init(); } /** * 畫線 */ 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> </div> </body> </html>
效果如下: