javascript 开发百度地图
1、完成内容，按照不同业态类型（A,B,C,D,E），标注不同图标（完成）
2、点击标注点分别弹出markerArr数组内的title，yetai等内容目前可以弹出标注点内容，但是永远都是markerArr数组内的最后一条数据，请问应该怎样才可以点击标注点后弹出对应的标注点数组信息。
求大神指点，感激不尽，谢谢。
5
1706<!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> 
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
<!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标注之后，立刻加监听。
请大神指教，没人知道吗？
求大神指点，小弟感激不尽，谢谢