扫码关注官方订阅号
javascript 开发百度地图
1、完成内容，按照不同业态类型（A,B,C,D,E），标注不同图标（完成）
2、点击标注点分别弹出markerArr数组内的title，yetai等内容目前可以弹出标注点内容，但是永远都是markerArr数组内的最后一条数据，请问应该怎样才可以点击标注点后弹出对应的标注点数组信息。
求大神指点，感激不尽，谢谢。
Hello, World html{height:100%} body{height:100%;margin:0px;padding:0px} #allmap{height:100%} //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
<!doctype html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>BaiDu_Map</title> <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak="></script> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style></head><body><div id="allmap"></div></body><script language="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" }, ]; map_init(); function map_init() { // GL版命名空间为BMapGL // 按住鼠标右键，修改倾斜角和角度 var map = new BMapGL.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMapGL.Point(116.333405,39.974042), 13); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 //自定义业态图标图片地址及尺寸 var zIcon = new BMapGL.Icon('images/z.png',new BMapGL.Size(30,30)); //超市发总部办公大楼 var aIcon = new BMapGL.Icon('images/a.png',new BMapGL.Size(30,30)); //综合超市 var bIcon = new BMapGL.Icon('images/b.png',new BMapGL.Size(30,30)); //食品超市 var cIcon = new BMapGL.Icon('images/c.png',new BMapGL.Size(30,30)); //生活超市 var dIcon = new BMapGL.Icon('images/d.png',new BMapGL.Size(30,30)); //生鲜超市 var eIcon = new BMapGL.Icon('images/e.png',new BMapGL.Size(30,30)); //社区超市 var fIcon = new BMapGL.Icon('images/f.png',new BMapGL.Size(30,30)); //外阜店 var lIcon = new BMapGL.Icon('images/l.png',new BMapGL.Size(30,30)); //超市发罗森*** var hIcon = new BMapGL.Icon('images/h.png',new BMapGL.Size(30,30)); //合作店 var gIcon = new BMapGL.Icon('images/g.png',new BMapGL.Size(30,30)); //菜*** var iIcon = new BMapGL.Icon('images/i.png',new BMapGL.Size(30,30)); //应急物资 //存放经纬度数组 var point = new Array(); //存放标注点数组 var marker = new Array(); //存放提示信息窗口对象数组 var info = new Array(); //设置允许信息窗发送消息 var opts = {height:100,width:200}; //循环输出markerArr数组内数组 for (var i = 0;i<markerArr.length;i++){ var p0 = markerArr[i].point.split(',')[0]; var p1 = markerArr[i].point.split(',')[1]; // console.log(windowinfo); point[i] = new window.BMapGL.Point(p0,p1); console.log(point[i]); marker[i] = new window.BMapGL.Marker(point[i]); // console.log(marker[i]); //通过业态判断显示标注点图片 switch (markerArr[i].yetai) { case "A": marker[i] = new window.BMapGL.Marker(point[i],{icon:aIcon}); break; case "B": marker[i] = new window.BMapGL.Marker(point[i],{icon:bIcon}); break; case "C": marker[i] = new window.BMapGL.Marker(point[i],{icon:cIcon}); break; case "D": marker[i] = new window.BMapGL.Marker(point[i],{icon:dIcon}); break; case "E": marker[i] = new window.BMapGL.Marker(point[i],{icon:eIcon}); break; case "f": marker[i] = new window.BMapGL.Marker(point[i],{icon:fIcon}); break; case "l": marker[i] = new window.BMapGL.Marker(point[i],{icon:lIcon}); break; case "h": marker[i] = new window.BMapGL.Marker(point[i],{icon:hIcon}); break; case "g": marker[i] = new window.BMapGL.Marker(point[i],{icon:gIcon}); break; case "i": marker[i] = new window.BMapGL.Marker(point[i],{icon:iIcon}); break; default: marker[i] = new window.BMapGL.Marker(point[i],{icon:zIcon}); } marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 var content=markerArr[i].title; var infoWindow = new BMapGL.InfoWindow(content,opts); marker[i].addEventListener("click", (function (k) { // js 闭包 return function () { //map.centerAndZoom(point[k], 18); //marker[k].openInfoWindow(info[k]); console.log(marker); this.openInfoWindow(infoWindow, marker[i]); //开启信息窗口 } })(i) ); map.addOverlay(marker[i]); } }function info_window() {}</script></html>
不管点击哪一个标注，都是输出最后一条的信息。这主要是作用域的问题。
用闭包解决：
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标注之后，立刻加监听。
请大神指教，没人知道吗？
求大神指点，小弟感激不尽，谢谢
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
0 
5
1745
收藏
<!doctype html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>BaiDu_Map</title> <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak="></script> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style></head><body><div id="allmap"></div></body><script language="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" }, ]; map_init(); function map_init() { // GL版命名空间为BMapGL // 按住鼠标右键，修改倾斜角和角度 var map = new BMapGL.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMapGL.Point(116.333405,39.974042), 13); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 //自定义业态图标图片地址及尺寸 var zIcon = new BMapGL.Icon('images/z.png',new BMapGL.Size(30,30)); //超市发总部办公大楼 var aIcon = new BMapGL.Icon('images/a.png',new BMapGL.Size(30,30)); //综合超市 var bIcon = new BMapGL.Icon('images/b.png',new BMapGL.Size(30,30)); //食品超市 var cIcon = new BMapGL.Icon('images/c.png',new BMapGL.Size(30,30)); //生活超市 var dIcon = new BMapGL.Icon('images/d.png',new BMapGL.Size(30,30)); //生鲜超市 var eIcon = new BMapGL.Icon('images/e.png',new BMapGL.Size(30,30)); //社区超市 var fIcon = new BMapGL.Icon('images/f.png',new BMapGL.Size(30,30)); //外阜店 var lIcon = new BMapGL.Icon('images/l.png',new BMapGL.Size(30,30)); //超市发罗森*** var hIcon = new BMapGL.Icon('images/h.png',new BMapGL.Size(30,30)); //合作店 var gIcon = new BMapGL.Icon('images/g.png',new BMapGL.Size(30,30)); //菜*** var iIcon = new BMapGL.Icon('images/i.png',new BMapGL.Size(30,30)); //应急物资 //存放经纬度数组 var point = new Array(); //存放标注点数组 var marker = new Array(); //存放提示信息窗口对象数组 var info = new Array(); //设置允许信息窗发送消息 var opts = {height:100,width:200}; //循环输出markerArr数组内数组 for (var i = 0;i<markerArr.length;i++){ var p0 = markerArr[i].point.split(',')[0]; var p1 = markerArr[i].point.split(',')[1]; // console.log(windowinfo); point[i] = new window.BMapGL.Point(p0,p1); console.log(point[i]); marker[i] = new window.BMapGL.Marker(point[i]); // console.log(marker[i]); //通过业态判断显示标注点图片 switch (markerArr[i].yetai) { case "A": marker[i] = new window.BMapGL.Marker(point[i],{icon:aIcon}); break; case "B": marker[i] = new window.BMapGL.Marker(point[i],{icon:bIcon}); break; case "C": marker[i] = new window.BMapGL.Marker(point[i],{icon:cIcon}); break; case "D": marker[i] = new window.BMapGL.Marker(point[i],{icon:dIcon}); break; case "E": marker[i] = new window.BMapGL.Marker(point[i],{icon:eIcon}); break; case "f": marker[i] = new window.BMapGL.Marker(point[i],{icon:fIcon}); break; case "l": marker[i] = new window.BMapGL.Marker(point[i],{icon:lIcon}); break; case "h": marker[i] = new window.BMapGL.Marker(point[i],{icon:hIcon}); break; case "g": marker[i] = new window.BMapGL.Marker(point[i],{icon:gIcon}); break; case "i": marker[i] = new window.BMapGL.Marker(point[i],{icon:iIcon}); break; default: marker[i] = new window.BMapGL.Marker(point[i],{icon:zIcon}); } marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 var content=markerArr[i].title; var infoWindow = new BMapGL.InfoWindow(content,opts); marker[i].addEventListener("click", (function (k) { // js 闭包 return function () { //map.centerAndZoom(point[k], 18); //marker[k].openInfoWindow(info[k]); console.log(marker); this.openInfoWindow(infoWindow, marker[i]); //开启信息窗口 } })(i) ); map.addOverlay(marker[i]); } }function info_window() {}</script></html>
不管点击哪一个标注，都是输出最后一条的信息。这主要是作用域的问题。
用闭包解决：
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标注之后，立刻加监听。
请大神指教，没人知道吗？
求大神指点，小弟感激不尽，谢谢