百度地圖 批量新增marker和資訊視窗
阿新 • • 發佈：2019-01-31
別的博主把需求的業務寫得非常複雜，或許是個人能力不足，把博主的業務邏輯抄下來後發現實際上並沒有實現點選marker彈出資訊視窗這個需求，所以就結合其它博主的加上自己個人的理解寫出瞭如下程式碼<head> <script type="text/javascript" src="http://tajs.qq.com/stats?sId=你的id" charset="UTF-8"></script> </head> <body> <div id="container"></div> </body> <style> var map = new BMap.Map("container",{enableMapClick:false}); var point = new BMap.Point(113.307649675,23.1200491021); // 建立點座標 map.centerAndZoom(point, 15); // 初始化地圖，設定中心點座標和地圖級別 map.enableScrollWheelZoom(true); var mapStyle={ style : "*googlelite*" }; map.setMapStyle(mapStyle); var opts = { width : 280, height: 150, title : "" , enableMessage:true, }; var navigation= new BMap.NavigationControl(); navigation.defaultAnchor=BMAP_ANCHOR_TOP_LEFT; map.addControl(navigation); map.addControl(new BMap.GeolocationControl()); var marklist1=[]; var title=[]; var data_info=[ [113.301665,23.142739,"sdfds","aaa","ee","ee","8","8"], [113.295122,23.144039,"fff","廣州","aa","dd","3","3"], [113.299318,23.131391,"bb","cc","dd","ee","3","3"] ]; for(var i=0;i<data_info.length;i++){ var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1])); var t1 = data_info[i][2]; var content = "<h4 style='color:#CC5522;font-size:14px;margin:0 0 5px 0;padding:0.2em 0'>" + data_info[i][2] + "</h4>"+ "<p style='font:12px arial,sans-serif;margin:0;line-height:1.5;'>"+data_info[i][3]+"</p>"+ "<p style='font:12px arial,sans-serif;margin:0;line-height:1.5;'>aaa："+data_info[i][4]+"</p>"+ "<p style='font:12px arial,sans-serif;margin:0;line-height:1.5;'>fff"+data_info[i][5]+"</p>"+ "<p style='font:12px arial,sans-serif;margin:0;line-height:1.5;'>ddd"+data_info[i][6]+"</p>"+ "<p style='font:12px arial,sans-serif;margin:0;line-height:1.5;'>eee"+data_info[i][7]+"</p>"+ "</div>"; marklist1.push(marker); title.push(t1); map.addOverlay(marker); var label = new BMap.Label(title[i],{offset:new BMap.Size(30,0)});//label.setStyle({ }); marker.setLabel(label); addMarkerInfo(marker,content); marklist1.forEach(function(item){item.show();}) } function addMarkerInfo(marker,content){ var infoWindow = new BMap.InfoWindow(content, opts); marker.onclick=function(){ marker.openInfoWindow(infoWindow); } } </style>