javascript 開發(fā)百度地圖
問題描述
javascript 開發(fā)百度地圖
1、完成內(nèi)容，按照不同業(yè)態(tài)類型（A,B,C,D,E），標注不同圖標（完成）
2、點擊標注點分別彈出markerArr數(shù)組內(nèi)的title，yetai等內(nèi)容目前可以彈出標注點內(nèi)容，但是永遠都是markerArr數(shù)組內(nèi)的最后一條數(shù)據(jù)，請問應該怎樣才可以點擊標注點后彈出對應的標注點數(shù)組信息。
求大神指點，感激不盡，謝謝。
<!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: "北京市海淀區(qū)", tel: "010-88888888", yetai:"Y" }, { title: "名稱：超市發(fā)（雙榆樹店）", point: "116.331637,39.973424", address: "北京市海淀區(qū)北三環(huán)西路雙榆樹西里7號 ", tel: "010-62640346", yetai:"A"},{ title: "名稱：超市發(fā)（科學城店）", point: "116.324596,39.986931", address: "海淀區(qū)中關村南路77號", tel: "010-62551377", yetai:"B"},{ title: "名稱：超市發(fā)（魏公村店）", point: "116.326296,39.960478", address: "地址：北京市海淀區(qū)魏公村街1號2號樓底商臨01", tel: "010-88570042", yetai:"C"},{ title: "名稱：超市發(fā)（白頤路店）", point: "116.33458,39.951854", address: "地址：北京市海淀區(qū)中國氣象局社區(qū)南區(qū)22號樓底商", tel: "010-58995553", yetai:"D"},{ title: "名稱：超市發(fā)（上地店）", point: "116.318805,40.03683", address: "地址：上地信息路19-3號", tel: "010-62971745", yetai:"E"}, { title: "名稱：超市發(fā)（xxxx店）", point: "116.318805,40.03620", address: "北京市海淀區(qū)北三環(huán)西路號 ", tel: "010-62640346", yetai:"A"}, ]; function map_init() { // 創(chuàng)建地圖實例 var map = new BMap.Map("allmap"); // 創(chuàng)建點坐標 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); //存放標注點經(jīng)緯度信息數(shù)組 var point = new Array(); //存放標注點對象數(shù)組 var marker = new Array(); var marker2 = new Array(); //設置允許信息窗發(fā)送消息 var opts = {enableMessage:true}; var info = new Array(); //存放提示信息窗口對象的數(shù)組 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]); } } //異步調(diào)用百度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: "北京市海淀區(qū)雙", tel: "010-88888888", yetai:"Y" }, { title: "名稱：超市發(fā)（雙榆樹店）", point: "116.331637,39.973424", address: "北京市海淀區(qū)北三環(huán)西路雙榆樹西里7號 ", tel: "010-62640346", yetai:"A" }, { title: "名稱：超市發(fā)（科學城店）", point: "116.324596,39.986931", address: "海淀區(qū)中關村南路77號", tel: "010-62551377", yetai:"B" }, { title: "名稱：超市發(fā)（魏公村店）", point: "116.326296,39.960478", address: "地址：北京市海淀區(qū)魏公村街1號2號樓底商臨01", tel: "010-88570042", yetai:"C" }, { title: "名稱：超市發(fā)（白頤路店）", point: "116.33458,39.951854", address: "地址：北京市海淀區(qū)中國氣象局社區(qū)南區(qū)22號樓底商", tel: "010-58995553", yetai:"D" }, { title: "名稱：超市發(fā)（上地店）", point: "116.318805,40.03683", address: "地址：上地信息路19-3號", tel: "010-62971745", yetai:"E" }, { title: "名稱：超市發(fā)（xxxx店）", point: "116.318805,40.03620", address: "北京市海淀區(qū)北三環(huán)西路號 ", tel: "010-62640346", yetai:"A" }, ]; map_init(); function map_init() { // GL版命名空間為BMapGL // 按住鼠標右鍵，修改傾斜角和角度 var map = new BMapGL.Map("allmap"); // 創(chuàng)建Map實例 map.centerAndZoom(new BMapGL.Point(116.333405,39.974042), 13); // 初始化地圖,設置中心點坐標和地圖級別 map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放//自定義業(yè)態(tài)圖標圖片地址及尺寸var zIcon = new BMapGL.Icon('images/z.png',new BMapGL.Size(30,30)); //超市發(fā)總部辦公大樓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)); //社區(qū)超市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)); //超市發(fā)羅森***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)); //應急物資//存放經(jīng)緯度數(shù)組var point = new Array();//存放標注點數(shù)組var marker = new Array();//存放提示信息窗口對象數(shù)組var info = new Array();//設置允許信息窗發(fā)送消息var opts = {height:100,width:200};//循環(huán)輸出markerArr數(shù)組內(nèi)數(shù)組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]); //通過業(yè)態(tà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;
將經(jīng)緯度，和顯示信息單獨放在函數(shù)里，new標注之后，立刻加監(jiān)聽。
回答3：請大神指教，沒人知道嗎？
回答4：求大神指點，小弟感激不盡，謝謝
相關文章：
1. android - 美團篩選處篩選條件停靠+條件點擊滑動到頂部。2. list - python 求助3. python3.x - python3.5使用pyinstaller打包報錯找不到libpython3.5mu.so.1.0等文件求解？4. python算法,如何優(yōu)雅的合并2個列表字典?5. python - def自定義函數(shù)的疑惑6. 請教： 關于 python 反斜杠轉(zhuǎn)義的疑問7. mysql優(yōu)化 - mysql like語句會導致全表掃描？8. javascript 如何下載一個excel文件 ?9. Python中, 仿照經(jīng)典代碼實現(xiàn)單例, 卻出現(xiàn)了不是單例的的狀態(tài), 代碼哪里出錯了 ?10. php由5.3升級到5.6后，登錄網(wǎng)站，返回的是php代碼，不是登錄界面，各位大神有知道的嗎？
網(wǎng)公網(wǎng)安備