如何根據資料庫儲存的經度緯度使用百度API定位到
阿新 • • 發佈:2019-02-09
1 . 首先需要申請一個百度地圖AK
2 . 引用js(<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=申請的AK"></script>)
3 . 在 jQuery 中應用
(PS : 由於這個<td>是JSON遍歷出來的,"class" 名都一樣,點選事件$("body").on("click",".glyphicon-globe",function(){} 這樣寫)
jsp頁面
JQuery程式碼:<div class="addmask" style="display: none;"> <div class="map"> <p>顧客評價位置</p> <i class="close"><span class="glyphicon glyphicon-remove"></span> </i> <div class="wap"> <div id="container"></div> </div> </div> </div>
經緯度data-a,data-b 是在json拼接html中拿到的$("body").on("click",".glyphicon-globe",function(){ var a = $(this).attr("data-a"); var b = $(this).attr("data-b"); $(".addmask").show("slow"); var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.331398,39.897445),11); map.enableScrollWheelZoom(true); if(a != "" && b != ""){ map.clearOverlays(); var new_point = new BMap.Point(a,b); var marker = new BMap.Marker(new_point); // 建立標註 map.addOverlay(marker); // 將標註新增到地圖中 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫 map.addControl(new BMap.NavigationControl()); //左上角控制元件 map.enableScrollWheelZoom(); //滾動放大 map.enableKeyboard(); //鍵盤放大 map.panTo(new_point); console.log(a+b); } }); $("body").on("click",".close",function(){ $(".addmask").hide("slow"); }); });
html+="<tr><td>"+obj[index].uid+"</td><td>"+obj[index].city
+"</td><td>"+obj[index].brand+"</td><td>"+obj[index].shoppe
+"<td>132</td>"
+"</td><td>"+obj[index].phone+"</td><td>"+obj[index].staffId
+"</td><td>"+year+'-'+month+'-'+date+' '+hour+':'+min+':'+sec+"</td><td>"+obj[index].type
+"</td><td class='glyphicon-globe' data-a='"
+obj[index].longtitude
+"' data-b='"
+obj[index].latitude
+"'></td></tr>";