1. 程式人生 > >如何根據資料庫儲存的經度緯度使用百度API定位到

如何根據資料庫儲存的經度緯度使用百度API定位到

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頁面

	<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>
JQuery程式碼:
$("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");
				});
			});	
經緯度data-a,data-b 是在json拼接html中拿到的
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>";