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标注之后,立刻加监听。
请大神指教,没人知道吗?
求大神指点,小弟感激不尽,谢谢