h5調用百度地圖api實現定位

提醒:經測試,在HBiuldX打包的Wep2App中有效, 在手機瀏覽器中無效,未探究原理,僅是實現項目所需功能,后續弄明白后再補充.

首先去百度地圖開發官網,申請開發者賬號,然后在控制台創建應用,類型選擇瀏覽器端, 申請成功后查看應用,會看到申請到的訪問應用(ak),如下圖:

 

 

以上前置工作做好后,着手實現h5的功能實現:

1.先在jsp頭部引用剛才申請到的api:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己申請到的ak"></script>

2.創建一個div來展示地圖:

<div id="mapDiv" style="width: 100%;height: 100%;background-color: #000000;position: absolute;">
　　<p id="allmap" style="width: 80%;height: 80%;position: absolute;margin: 10%;"></p>
　　<button type="button" class="btnBg" id="btnMapSet" style="margin-left: 10%;bottom: 5%;position: absolute;display: block;">定位確認</button>
</div>

<button type="button" class="btnBg" id="btnLocation" onclick="getLocation()" style="display: inline-block;">顯示當前定位</button>

 

3.實現的js方法:

//顯示當前定位調用方法
function getLocation(){ 　　plus.nativeUI.showWaiting();//顯示等待動畫 　　plus.geolocation.getCurrentPosition(showPosition, showError);//h5+獲取定位的經緯度,獲取成功則調用showPosition,失敗則調用showError. } function showPosition(position){ 　　var lng = position.coords.longitude;//經度 　　var lat = position.coords.latitude;//緯度 　　//alert('經度:'+lng+',緯度:'+lat); 　　showBaiDuMap(lng,lat);//經緯度作為入參,執行百度地圖的方法 } function showError(error){ 　　switch(error.code) { 　　case error.PERMISSION_DENIED: 　　　　alert("定位失敗,用戶拒絕請求地理定位"); 　　　　break; 　　case error.POSITION_UNAVAILABLE: 　　　　alert("定位失敗,位置信息是不可用"); 　　　　break; 　　case error.TIMEOUT: 　　　　alert("定位失敗,請求獲取用戶位置超時"); 　　　　break; 　　case error.UNKNOWN_ERROR: 　　　　alert("定位失敗,定位系統失效"); 　　　　break; 　　} } function showBaiDuMap(lng,lat){ 　　// 百度地圖API功能 　　//地圖初始化 　　var map = new BMap.Map("allmap"); 　　var gpsPoint = new BMap.Point(lng,lat); 　　map.centerAndZoom(gpsPoint,18); 　　//設置定位按鈕位置 　　//var opts = {anchor:BMAP_ANCHOR_BOTTOM_RIGHT} 　　//將定位控件添加到地圖上 　　//map.addControl(new BMap.GeolocationControl(opts)); 　　//設置縮放按鈕位置及類型 　　var ove={anchor:BMAP_ANCHOR_TOP_RIGHT,type:BMAP_NAVIGATION_CONTROL_ZOOM} 　　//添加縮放按鈕 　　map.addControl(new BMap.NavigationControl(ove)); 　　var geolocation = new BMap.Geolocation(); 　　//坐標轉換完之后的回調函數 　　translateCallback = function (data){
　　　　plus.nativeUI.closeWaiting();//關閉等待動畫 　　　　if(data.status === 0) { 　　　　　　var new_point=data.points[0];//這是轉換后的百度坐標 　　　　　　var marker = new BMap.Marker(new_point); 　　　　　　map.addOverlay(marker); 　　　　　　 　　　　　　map.centerAndZoom(new_point,20); 　　　　　　map.panTo(new_point);//地圖中心移動到定位的點 　　　　　　var gc = new BMap.Geocoder(); 　　　　　　gc.getLocation(new_point, function(rs){ 　　　　　　　　var addComp = rs.addressComponents; 　　　　　　　　console.log(rs.address);//地址信息
　　　　　　　　
　　　　　　　　//定位點添加點擊監聽,自己寫的,按照實際需求修改 　　　　　　　　marker.addEventListener("click", function(){ 　　　　　　　　　　layer.msg(rs.address); 　　　});
　　　　　　　　//地圖下方的定位確認按鈕,自己寫的,按照實際需求修改 　　　　　　　　$("#btnMapSet").click(function (){ 　　　　　　　　　　layer.msg(rs.address);//提示窗形式展示定位的地址 　　　　　　　　　　$("#mapDiv").fadeOut(300);//地圖框漸隱 　　　　　　　　}); 　　　　　　}); 　　　　} 　　} 　　setTimeout(function(){ 　　　　var convertor = new BMap.Convertor(); 　　　　var pointArr = []; 　　　　pointArr.push(gpsPoint);
　　　　//將gps定位坐標轉為百度定位坐標,轉換成功后調用回調函數translateCallback. 　　　　convertor.translate(pointArr, 1, 5, translateCallback)
　　}, 1000);
 }

效果預覽:

 

js方法中的layer.msg()等方法是用到的layer,可百度下載 ,在頭部引用即可使用

ps:暫時記錄, 后續待修改完善優化.