通過瀏覽器獲取經(jīng)緯度及城市信息(百度地圖&高德地圖JavaScript API)

資源:

百度地圖開放平臺JavaScript API v2.0類參考
百度地圖開放平臺JavaScript API
百度地圖開放平臺論壇
高德開放平臺-地圖-JS API-參考手冊
高德開放平臺 Jacascript API


高德地圖定位插件

定位
插件名稱 說明
AMap.Geolocation 定位插件,整合了瀏覽器定位、精確IP定位、sdk輔助定位多種手段位
AMap.CitySearchy 城市查詢,IP定位獲取當(dāng)前城市信息
AMap.Geolocation 插件

AMap.Geolocation定位服務(wù)插件。融合了瀏覽器定位、高精度IP定位、安卓定位sdk輔助定位等多種手段,提供了獲取當(dāng)前準(zhǔn)確位置、獲取當(dāng)前城市信息、持續(xù)定位(瀏覽器定位)等功能。用戶可以通過兩種當(dāng)時獲得定位的成敗和結(jié)果,一種是在getCurrentPosition的時候傳入回調(diào)函數(shù)來處理定位結(jié)果,一種是通過事件監(jiān)聽來取得定位結(jié)果。

注:默認(rèn)情況下,PC端優(yōu)先使用精確IP定位,解決多數(shù)瀏覽器無法完成定位的現(xiàn)狀,IP定位失敗后使用瀏覽器定位;手機端優(yōu)先使用瀏覽器定位,失敗后使用IP定位;對于安卓WebView頁面的開發(fā)者,可以結(jié)合定位sdk進行輔助定位,詳細(xì)說明見useNative參數(shù)。IP定位的精度值為'null'。

由于Chrome、IOS10等已不再支持非安全域的瀏覽器定位請求,為保證定位成功率和精度,請盡快升級您的站點到HTTPS。

代碼示例
mapObj = new AMap.Map('iCenter');
mapObj.plugin('AMap.Geolocation', function () {
    geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,//是否使用高精度定位,默認(rèn):true
        timeout: 10000,          //超過10秒后停止定位,默認(rèn):無窮大
        maximumAge: 0,           //定位結(jié)果緩存0毫秒,默認(rèn):0
        convert: true,           //自動偏移坐標(biāo),偏移后的坐標(biāo)為高德坐標(biāo),默認(rèn):true
        showButton: true,        //顯示定位按鈕,默認(rèn):true
        buttonPosition: 'LB',    //定位按鈕??课恢茫J(rèn):'LB',左下角
        buttonOffset: new AMap.Pixel(10, 20),//定位按鈕與設(shè)置的??课恢玫钠屏浚J(rèn):Pixel(10, 20)
        showMarker: true,        //定位成功后在定位到的位置顯示點標(biāo)記,默認(rèn):true
        showCircle: true,        //定位成功后用圓圈表示定位精度范圍,默認(rèn):true
        panToLocation: true,     //定位成功后將定位到的位置作為地圖中心點,默認(rèn):true
        zoomToAccuracy:true      //定位成功后調(diào)整地圖視野范圍使定位位置及精度范圍視野內(nèi)可見,默認(rèn):false
    });
    mapObj.addControl(geolocation);
    geolocation.getCurrentPosition(); //精準(zhǔn)定位
    // geolocation.getCityInfo();  //定位到城市
    AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
    AMap.event.addListener(geolocation, 'error', onError);      //返回定位出錯信息
});


Geolocation的定位流程以及定位失敗的原因?

JS-API的Geolocation定位插件,融合了HTML5 Geolocation定位接口、精確IP定位服務(wù),以及安卓定位sdk定位。其中與安卓定位sdk的結(jié)合使用適用于開發(fā)安卓系統(tǒng)的H5應(yīng)用,需同時使用安卓定位sdk和JS-API。

A. Geolocation.getCurrentPosition獲取精確位置的流程是什么樣的?
  1. 在PC端,因為原生接口成功率很低,JS-API會優(yōu)先調(diào)用精確IP定位服務(wù),在IP定位失敗的時候,嘗試使用瀏覽器原生定位接口進行定位,如果原生定位接口也定位失敗,則返回error事件或回調(diào)error信息。定位成功之后我們會對瀏覽器定位的經(jīng)緯度結(jié)果進行向高德坐標(biāo)的轉(zhuǎn)化,并對所有有效定位結(jié)果融合地址信息后返回complete事件或者回調(diào)complete信息。
  2. 在移動端,如果開發(fā)者開啟了sdk輔助定位,那么安卓手機上我們會優(yōu)先嘗試調(diào)用sdk的定位接口,失敗之后優(yōu)先調(diào)用瀏覽器原生定位接口進行定位,瀏覽器定位失敗之后嘗試進行精確IP定位,如果以上三種定位全部嘗試失敗則返回error事件或回調(diào)error信息,否則和PC端的一樣,定位成功之后進行高德坐標(biāo)轉(zhuǎn)化和地址融合。
  3. 我們在定位的回調(diào)或者事件響應(yīng)中返回了message字段,message字段明確指出了每一步的成功和失敗原因。
B. 如果沒有拿到message如何獲取定位失敗錯誤信息?

可以通過如下方法獲取定位失敗信息,之后根據(jù)定位錯誤信息參考下一節(jié)的說明

//可以拷貝如下代碼,使用alert輸出定位失敗信息
//解析定位錯誤信息
function onError(data) {
alert(JSON.stringify(data));
document.getElementById('tip').innerHTML = '定位失敗';
}
C. getCurrentPosition返回的message原因解析:
  1. Get ipLocation failed:IP精確定位失敗,精確IP定位服務(wù)目前無法完全覆蓋所有用戶IP,失敗率在5%左右;
  2. sdk定位失?。赫垯z查sdk的key是否設(shè)置好,以及webview的定位權(quán)限及應(yīng)用和系統(tǒng)的定位權(quán)限是否開啟。
  3. 瀏覽器定位失敗,有多種情況:

Browser not Support html5 geolocation:瀏覽器不支持原生定位接口,如IE較低版本的瀏覽器等
Geolocation permission denied:用戶禁用了定位權(quán)限,需要用戶開啟設(shè)備和瀏覽器的定位權(quán)限,并在瀏覽器彈窗中點擊“允許使用定位”選項。
Geolocation permission denied:瀏覽器禁止了非安全域的定位請求,比如Chrome、IOS10已陸續(xù)禁止,這時候需要升級站點到HTTPS。注意Chrome不會禁止localhost等域名HTTP協(xié)議下的定位
Get geolocation time out:瀏覽器定位超時,包括原生的超時,可以適當(dāng)增加超時屬性的設(shè)定值以減少這一現(xiàn)象,另外還有個別瀏覽器(如google Chrome瀏覽器等)本身的定位接口是黑洞,通過其請求定位完全沒有回應(yīng),也會超時返回失敗。
Get geolocation failed:定位失敗,Chrome、火狐以及部分套殼瀏覽器接入的定位服務(wù)在國外,有較大限制,失敗率高。

注釋:如果定位到城市即可滿足需求,建議大家改用Geolocation.getCityInfo方法,可以根據(jù)IP返回用戶所在城市的基本信息,包括省、市名稱、adcode、citycode、城市中心點,城市矩形邊界等信息。



百度地圖JavaScript API

簡介

JavaScript API提供在Web端獲取當(dāng)前位置信息的方法,融合了瀏覽器定位、IP定位、安卓定位SDK輔助定位等多種手段,提供了獲取當(dāng)前準(zhǔn)確位置、獲取當(dāng)前城市信息等功能。

瀏覽器定位精度依賴瀏覽器自身特性,IP定位的精度值為城市級別。

對于安卓WebView頁面的開發(fā)者,可以結(jié)合定位SDK進行輔助定位,使用方法參見定位SDK相關(guān)章節(jié)。

注:由于Chrome、iOS10等已不再支持非安全域的瀏覽器定位請求,為保證定位成功率和精度,請盡快升級您的站點到HTTPS。

提供的定位服務(wù)
接口 類名 簡介
瀏覽器定位 Geolocation 優(yōu)先調(diào)用瀏覽器H5定位接口,如果失敗會調(diào)用IP定位
IP定位 LocalCity 根據(jù)用戶IP 返回城市級別的定位結(jié)果
定位SDK輔助定位 Geolocation ......
定位方法代碼示例
//瀏覽器定位
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);

var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
    if(this.getStatus() == BMAP_STATUS_SUCCESS){
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        alert('您的位置:'+r.point.lng+','+r.point.lat);
    }
    else {
        alert('failed'+this.getStatus());
    }        
});
其他

轉(zhuǎn)載

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XX"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XXX"></script>` 

上面這段代碼執(zhí)行完后百度會返回一段代碼并插入到你的DOM中執(zhí)行

(function() {
    window.BMap_loadScriptTime = (new Date).getTime();
    document.write('<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=XX&services=&t=20160513110936"></script>');
})();
  

在函數(shù)執(zhí)行的時候,經(jīng)過測試不管是否允許地理位置的授權(quán),都能獲取到定位位置,只不過不授權(quán)時候獲取的應(yīng)該是IP地址的定位,授權(quán)是精確的GPS定位而已

所以在任何一段Javascript腳本中執(zhí)行上述代碼,用戶在知道彈出詢問是否允許獲取地理位置授權(quán)這個提示之后,不管是否允許都能獲取到使用者的定位的

注意是geolocation是HTML5的東西,判斷一下瀏覽器是否支持

if ("geolocation" in navigator) {
    alert("支持geolocation");
} else {
    alert("不支持geolocation");
}

百度geolocation.getCurrentPosition()這個函數(shù)里面的第一個參數(shù)是回調(diào)成功后執(zhí)行的,第二個參數(shù)是回調(diào)后失敗執(zhí)行的,官網(wǎng)的地址貌似沒有寫明白第二個參數(shù)是可以傳一個對象或者匿名函數(shù)進去,所以導(dǎo)致很多人不知道getCurrentPosition失效的時候怎么捕捉到這個失敗的回調(diào),下面的例子就是傳入一個失敗時候要執(zhí)行回調(diào)函數(shù),讓后面代碼能順利執(zhí)行下去

var setCookie = function(name, value) {
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
};
var geolocation = new BMap.Geolocation();
//彈出地理授權(quán)  
geolocation.getCurrentPosition(function(r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            alert('定位成功');
            console.log(r.point);
        } else {
            alert("baidu return failed");
        }
    },
    //獲取失敗時候的回調(diào)  
    function(r) {
        console.log(r);
        alert('定位失敗');
        return {
            //設(shè)置高精度  
            enableHighAccuracy: true
        };
    }
);

如果確實因為各種原因而獲取不到回調(diào),建議這里加個定時器比較保險

setTimeout(function() {
    alert("獲取超時");
    setCookie("longitude", '113.333333');
    setCookie("latitude", '23.333333');
    setCookie("city", 'autumnswind');
    setCookie("cityCode", '543210');
    load();
}, 4000)

無法獲取定位的原因:應(yīng)該是鑒于該特性可能侵犯用戶的隱私,除非用戶同意,否則用戶位置信息是不可用的。還有可能是因為某些瀏覽器調(diào)用了谷歌的服務(wù),所以這里會被卡。







?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容