javascript 開發百度地圖
問題描述
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" /> </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>
問題解答
回答1：<!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>
回答2：不管點擊哪一個標注，都是輸出最后一條的信息。這主要是作用域的問題。
用閉包解決：
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標注之后，立刻加監聽。
回答3：請大神指教，沒人知道嗎？
回答4：求大神指點，小弟感激不盡，謝謝
相關文章：
1. python - 編碼問題求助2. mysql - jdbc的問題3. python - 我在使用pip install -r requirements.txt下載時，為什么部分能下載，部分不能下載4. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ，會帶來哪些效率或者其他方面的好處5. mysql - 如何減少使用或者不用LEFT JOIN查詢？6. Python爬蟲如何爬取span和span中間的內容并分別存入字典里？7. 視頻文件不能播放，怎么辦？8. 圖片鏈接的地址怎么獲得的9. mysql 5個left關鍵 然后再用搜索條件 幾千條數據就會卡，如何解決呢10. python - oslo_config
網公網安備