javascript 開發百度地圖
1、完成內容,依照不同業態類型(A,B,C,D,E),標註不同圖示(完成)
2、點選標註點分別彈出markerArr數組內的title,yetai等內容目前可以彈出標註點內容,但是永遠都是markerArr數組內的最後一條數據,請問應該怎樣才可以點擊標註點後彈出對應的標註點數組信息。
求大神指點,感激不盡,謝謝。
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #allmap{height:100%} </style> <script type="text/javascript" src=> //v2.0版本的引用方式:src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" </script> <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /> </head> <body> <div id="allmap"></div> <script type="text/javascript"> var markerArr = [ { title: "名称:北京超市(总部)", point: "116.333405,39.974042", address: "北京市海淀区", tel: "010-88888888", yetai:"Y" }, { title: "名称:超市发(双榆树店)", point: "116.331637,39.973424", address: "北京市海淀区北三环西路双榆树西里7号 ", tel: "010-62640346", yetai:"A" }, { title: "名称:超市发(科学城店)", point: "116.324596,39.986931", address: "海淀区中关村南路77号", tel: "010-62551377", yetai:"B" }, { title: "名称:超市发(魏公村店)", point: "116.326296,39.960478", address: "地址:北京市海淀区魏公村街1号2号楼底商临01", tel: "010-88570042", yetai:"C" }, { title: "名称:超市发(白颐路店)", point: "116.33458,39.951854", address: "地址:北京市海淀区中国气象局社区南区22号楼底商", tel: "010-58995553", yetai:"D" }, { title: "名称:超市发(上地店)", point: "116.318805,40.03683", address: "地址:上地信息路19-3号", tel: "010-62971745", yetai:"E" }, { title: "名称:超市发(xxxx店)", point: "116.318805,40.03620", address: "北京市海淀区北三环西路号 ", tel: "010-62640346", yetai:"A" }, ]; function map_init() { // 创建地图实例 var map = new BMap.Map("allmap"); // 创建点坐标 var point = new BMap.Point(116.333405,39.974042); // 初始化地图,设置中心点坐标和地图级别 map.centerAndZoom(point, 13); //开启鼠标滚轮缩放 map.enableScrollWheelZoom(true); var ctrlNav = new window.BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrlNav); 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); //存放标注点经纬度信息数组 var point = new Array(); //存放标注点对象数组 var marker = new Array(); var marker2 = new Array(); //设置允许信息窗发送消息 var opts = {enableMessage:true}; var info = new Array(); //存放提示信息窗口对象的数组 for (var i = 0;i<markerArr.length;i++){ var p0 = markerArr[i].point.split(",")[0]; var p1 = markerArr[i].point.split(",")[1]; point[i] = new window.BMap.Point(p0,p1); marker[i] = new window.BMap.Marker(point[i]); var aIcon = new BMap.Icon("images/a.png", new BMap.Size(30,30)); var bIcon = new BMap.Icon("images/b.png", new BMap.Size(30,30)); var cIcon = new BMap.Icon("images/c.png", new BMap.Size(30,30)); var dIcon = new BMap.Icon("images/d.png", new BMap.Size(30,30)); var eIcon = new BMap.Icon("images/e.png", new BMap.Size(30,30)); var yIcon = new BMap.Icon("images/y.png", new BMap.Size(30,30)); if (markerArr[i].yetai=="A"){ marker[i] = new window.BMap.Marker(point[i],{icon:aIcon}); }else if(markerArr[i].yetai=="B"){ marker[i] = new window.BMap.Marker(point[i],{icon:bIcon}); }else if(markerArr[i].yetai=="C"){ marker[i] = new window.BMap.Marker(point[i],{icon:cIcon}); }else if(markerArr[i].yetai=="D"){ marker[i] = new window.BMap.Marker(point[i],{icon:dIcon}); }else if(markerArr[i].yetai=="E"){ marker[i] = new window.BMap.Marker(point[i],{icon:eIcon}); }else if(markerArr[i].yetai=="Y"){ marker[i] = new window.BMap.Marker(point[i],{icon:yIcon}); } var content='<input onclick="on()" type="button" value="导航">' + markerArr[i].title; var infoWindow = new BMap.InfoWindow(content,opts); marker[i].addEventListener("click", function () { this.openInfoWindow(infoWindow); }); map.addOverlay(marker[i]); } } //异步调用百度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> </body> </html>
<!doctype html><head> <meta http-equiv="X-UA-Compatible" content="ie=edge">
不管點擊哪一個標註,都是輸出最後一條的訊息。這主要是作用域的問題。
用閉包解決:
var createMark = function(lng, lat, info_html) {
var _marker = new BMap.Marker(new BMap.Point(lng, lat));
_marker.addEventListener("click", function(e) {
this.openInfoWindow(new BMap.InfoWindow(info_html));
}) ;
_marker.addEventListener("mouseover", function(e) { this.setTitle("位於: " lng "," lat);
});
# return _marker;
將經緯度,和顯示訊息單獨放在函數裡,new標註之後,立刻加監聽。
請大神指教,沒人知道嗎?
求大神指點,小弟感激不盡,謝謝