HTML5獲取地址位置
阿新 • • 發佈:2018-11-15
通過HTML5的geolocation來獲取地理位置,但要注意的是這裡獲取的原始座標,直接用該座標在百度地圖上顯示不準確,需要進行轉換。
一、用HTML5的geolocation獲取原始地址
<script type="text/javascript"> function getLocation(){ if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition,showError); }else{ alert("瀏覽器不支援地理定位。"); } } 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 showPosition(position){ var lat = position.coords.latitude; //緯度 var lag = position.coords.longitude; //經度 alert('緯度:'+lat+',經度:'+lag); }
注意:用原生HTML5獲取經緯度時,在蘋果手機上不能正常獲取。原因是蘋果手機在升級為IOS10以上後,只允許https的網頁獲取地理位置,若是http網站則獲取失敗。這時若繼續用http網站,可採用百度地圖API(參考後面的第三項問題)或其他地圖API來獲取。
二、用百度地圖API進行轉換
先附百度地圖API對座標轉換的介紹:
目前國內主要有以下三種座標系:
WGS84:為一種大地座標系,也是目前廣泛使用的GPS全球衛星定位系統使用的座標系。
GCJ02:又稱火星座標系,是由中國國家測繪局制訂的地理資訊系統的座標系統。由WGS84座標系經加密後的座標系。
BD09:為百度座標系,在GCJ02座標系基礎上再次加密。其中bd09ll表示百度經緯度座標,bd09mc表示百度墨卡托米制座標。
非中國地區地圖,服務座標統一使用WGS84座標。
其他座標轉百度座標
百度對外介面的座標系為BD09座標系,並不是GPS採集的真實經緯度,在使用百度地圖JavaScript API服務前,需先將非百度座標通過座標轉換介面轉換成百度座標。 座標轉換、批量座標轉換示例詳見JavaScript API示例。
注意:請勿使用其他非官方轉換方法!!!
//通過百度地圖API將原始經緯度轉換為真實的經緯度
function translate(lng,lat){
var ggPoint = new BMap.Point(lng,lat);//建立標點
//座標轉換完之後的回撥函式
translateCallback = function (data){
if(data.status === 0) {
var point = data.points[0];
//真實的緯度
var trans_lat = point.lat;
//真實的經度
var trans_lng = point.lng;
}
}
var convertor = new BMap.Convertor();//這個類就是轉換的物件
var pointArr = [];
pointArr.push(ggPoint);
convertor.translate(pointArr, 1, 5, translateCallback)//通過呼叫回撥函式來進行轉換。
}
三、用百度地圖API獲取當前位置
function getLocation(){
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
// alert('您的位置:'+r.point.lng+','+r.point.lat);
var trans_lat = r.point.lat;//緯度
var trans_lng = r.point.lng;//經度
//自定義程式碼
}else {
alert('failed'+this.getStatus());
}
});
}