javascript 開發(fā)百度地圖
問(wèn)題描述
javascript 開發(fā)百度地圖
1、完成內(nèi)容，按照不同業(yè)態(tài)類型（A,B,C,D,E），標(biāo)注不同圖標(biāo)（完成）
2、點(diǎn)擊標(biāo)注點(diǎn)分別彈出markerArr數(shù)組內(nèi)的title，yetai等內(nèi)容目前可以彈出標(biāo)注點(diǎn)內(nèi)容，但是永遠(yuǎn)都是markerArr數(shù)組內(nèi)的最后一條數(shù)據(jù)，請(qǐng)問(wèn)應(yīng)該怎樣才可以點(diǎn)擊標(biāo)注點(diǎn)后彈出對(duì)應(yīng)的標(biāo)注點(diǎn)數(shù)組信息。
求大神指點(diǎn)，感激不盡，謝謝。
<!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號(hào) ", tel: "010-62640346", yetai:"A"},{ title: "名稱：超市發(fā)（科學(xué)城店）", point: "116.324596,39.986931", address: "海淀區(qū)中關(guān)村南路77號(hào)", tel: "010-62551377", yetai:"B"},{ title: "名稱：超市發(fā)（魏公村店）", point: "116.326296,39.960478", address: "地址：北京市海淀區(qū)魏公村街1號(hào)2號(hào)樓底商臨01", tel: "010-88570042", yetai:"C"},{ title: "名稱：超市發(fā)（白頤路店）", point: "116.33458,39.951854", address: "地址：北京市海淀區(qū)中國(guó)氣象局社區(qū)南區(qū)22號(hào)樓底商", tel: "010-58995553", yetai:"D"},{ title: "名稱：超市發(fā)（上地店）", point: "116.318805,40.03683", address: "地址：上地信息路19-3號(hào)", tel: "010-62971745", yetai:"E"}, { title: "名稱：超市發(fā)（xxxx店）", point: "116.318805,40.03620", address: "北京市海淀區(qū)北三環(huán)西路號(hào) ", tel: "010-62640346", yetai:"A"}, ]; function map_init() { // 創(chuàng)建地圖實(shí)例 var map = new BMap.Map("allmap"); // 創(chuàng)建點(diǎn)坐標(biāo) var point = new BMap.Point(116.333405,39.974042); // 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別 map.centerAndZoom(point, 13);//開啟鼠標(biāo)滾輪縮放 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); //存放標(biāo)注點(diǎn)經(jīng)緯度信息數(shù)組 var point = new Array(); //存放標(biāo)注點(diǎn)對(duì)象數(shù)組 var marker = new Array(); var marker2 = new Array(); //設(shè)置允許信息窗發(fā)送消息 var opts = {enableMessage:true}; var info = new Array(); //存放提示信息窗口對(duì)象的數(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="導(dǎo)航">' + 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>
問(wèn)題解答
回答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號(hào) ", tel: "010-62640346", yetai:"A" }, { title: "名稱：超市發(fā)（科學(xué)城店）", point: "116.324596,39.986931", address: "海淀區(qū)中關(guān)村南路77號(hào)", tel: "010-62551377", yetai:"B" }, { title: "名稱：超市發(fā)（魏公村店）", point: "116.326296,39.960478", address: "地址：北京市海淀區(qū)魏公村街1號(hào)2號(hào)樓底商臨01", tel: "010-88570042", yetai:"C" }, { title: "名稱：超市發(fā)（白頤路店）", point: "116.33458,39.951854", address: "地址：北京市海淀區(qū)中國(guó)氣象局社區(qū)南區(qū)22號(hào)樓底商", tel: "010-58995553", yetai:"D" }, { title: "名稱：超市發(fā)（上地店）", point: "116.318805,40.03683", address: "地址：上地信息路19-3號(hào)", tel: "010-62971745", yetai:"E" }, { title: "名稱：超市發(fā)（xxxx店）", point: "116.318805,40.03620", address: "北京市海淀區(qū)北三環(huán)西路號(hào) ", tel: "010-62640346", yetai:"A" }, ]; map_init(); function map_init() { // GL版命名空間為BMapGL // 按住鼠標(biāo)右鍵，修改傾斜角和角度 var map = new BMapGL.Map("allmap"); // 創(chuàng)建Map實(shí)例 map.centerAndZoom(new BMapGL.Point(116.333405,39.974042), 13); // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別 map.enableScrollWheelZoom(true); //開啟鼠標(biāo)滾輪縮放//自定義業(yè)態(tài)圖標(biāo)圖片地址及尺寸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)); //應(yīng)急物資//存放經(jīng)緯度數(shù)組var point = new Array();//存放標(biāo)注點(diǎn)數(shù)組var marker = new Array();//存放提示信息窗口對(duì)象數(shù)組var info = new Array();//設(shè)置允許信息窗發(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]); //通過(guò)業(yè)態(tài)判斷顯示標(biāo)注點(diǎn)圖片 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); //跳動(dòng)的動(dòng)畫 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：不管點(diǎn)擊哪一個(gè)標(biāo)注，都是輸出最后一條的信息。這主要是作用域的問(wèn)題。
用閉包解決：
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)緯度，和顯示信息單獨(dú)放在函數(shù)里，new標(biāo)注之后，立刻加監(jiān)聽。
回答3：請(qǐng)大神指教，沒(méi)人知道嗎？
回答4：求大神指點(diǎn)，小弟感激不盡，謝謝
相關(guān)文章：
1. Python如何播放還存在StringIO中的MP3?2. javascript - 請(qǐng)教如何獲取百度貼吧新增的兩個(gè)加密參數(shù)3. （python)關(guān)于如何做到按win+R再輸入文件文件名就可以運(yùn)行？4. Python爬蟲如何爬取span和span中間的內(nèi)容并分別存入字典里？5. python - 編碼問(wèn)題求助6. python - 關(guān)于計(jì)算日期的問(wèn)題7. 網(wǎng)頁(yè)爬蟲 - Python 爬蟲中如何處理驗(yàn)證碼？8. mysql - 分庫(kù)分表、分區(qū)、讀寫分離 這些都是用在什么場(chǎng)景下 ，會(huì)帶來(lái)哪些效率或者其他方面的好處9. mysql 一個(gè)sql 返回多個(gè)總數(shù)10. mysql - 如何減少使用或者不用LEFT JOIN查詢？
網(wǎng)公網(wǎng)安備