javascript 開發百度地圖
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>
uj5u.com熱心網友回復：
<!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>
uj5u.com熱心網友回復：
對于多個坐標點同時添加，建議使用forEach回圈完成（我是這么寫的），然后渲染當前值所有內容uj5u.com熱心網友回復：
for回圈內var替換成letuj5u.com熱心網友回復：
我感覺是這個問題
你去查一下es6 let 與 var區別與用法，有講這種情況
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/48739.html
標籤：JavaScript
下一篇：C#一張表多級分類查詢