87,923
社区成员
发帖
与我相关
我的任务
分享请教-javascript 开发百度地图
javascript 开发百度地图
1、完成内容，按照不同业态类型（A,B,C,D,E），标注不同图标（完成）
2、点击标注点分别弹出markerArr数组内的title，yetai等内容目前可以弹出标注点内容，但是永远都是markerArr数组内的最后一条数据，请问应该怎样才可以点击标注点后弹出对应的标注点数组信息。
求大神指点，感激不尽，谢谢。
1、完成内容，按照不同业态类型（A,B,C,D,E），标注不同图标（完成）
2、点击标注点分别弹出markerArr数组内的title，yetai等内容目前可以弹出标注点内容，但是永远都是markerArr数组内的最后一条数据，请问应该怎样才可以点击标注点后弹出对应的标注点数组信息。
求大神指点，感激不尽，谢谢。
<!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]);
}
}
</script>
</html>
...全文
请发表友善的回复…
发表回复
大大丿泡泡糖 2020-09-30
- 打赏
- 举报
把infowindow和marker的点击事件全都放到函数外面去，函数里面就初始化地图
陌、小默 2020-09-29
- 打赏
- 举报
我用var map = new BMapGL.Map("container");
结果是报错BMapGL is not defined 为什么
console.log( ) 2020-05-19
- 打赏
- 举报
我感觉是这个问题
你去查一下es6 let 与 var区别与用法，有讲这种情况
console.log( ) 2020-05-19
- 打赏
- 举报
for循环内var替换成let
孤独与酒伴我同行 2020-05-18
- 打赏
- 举报
对于多个坐标点同时添加，建议使用forEach循环完成（我是这么写的），然后渲染当前值所有内容
九日 2020-05-18
- 打赏
- 举报
<!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); //跳动的动画
marker[i].addEventListener("click",
(function (k) {
// js 闭包
var content=markerArr[i].title;
var infoWindow = new BMapGL.InfoWindow(content,opts);
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]);
}
}
</script>
</html>
