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

資源:

百度地圖開(kāi)放平臺(tái)JavaScript API v2.0類(lèi)參考
百度地圖開(kāi)放平臺(tái)JavaScript API
百度地圖開(kāi)放平臺(tái)論壇
高德開(kāi)放平臺(tái)-地圖-JS API-參考手冊(cè)
高德開(kāi)放平臺(tái) Jacascript API


高德地圖定位插件

定位
插件名稱(chēng) 說(shuō)明
AMap.Geolocation 定位插件杭棵,整合了瀏覽器定位、精確IP定位氛赐、sdk輔助定位多種手段位
AMap.CitySearchy 城市查詢(xún)魂爪,IP定位獲取當(dāng)前城市信息
AMap.Geolocation 插件

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

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

由于Chrome螺捐、IOS10等已不再支持非安全域的瀏覽器定位請(qǐng)求颠悬,為保證定位成功率和精度,請(qǐng)盡快升級(jí)您的站點(diǎn)到HTTPS定血。

代碼示例
mapObj = new AMap.Map('iCenter');
mapObj.plugin('AMap.Geolocation', function () {
    geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,//是否使用高精度定位赔癌,默認(rèn):true
        timeout: 10000,          //超過(guò)10秒后停止定位,默認(rèn):無(wú)窮大
        maximumAge: 0,           //定位結(jié)果緩存0毫秒澜沟,默認(rèn):0
        convert: true,           //自動(dòng)偏移坐標(biāo)灾票,偏移后的坐標(biāo)為高德坐標(biāo),默認(rèn):true
        showButton: true,        //顯示定位按鈕茫虽,默認(rèn):true
        buttonPosition: 'LB',    //定位按鈕涂裕靠位置,默認(rèn):'LB'濒析,左下角
        buttonOffset: new AMap.Pixel(10, 20),//定位按鈕與設(shè)置的桶噻郑靠位置的偏移量,默認(rèn):Pixel(10, 20)
        showMarker: true,        //定位成功后在定位到的位置顯示點(diǎn)標(biāo)記悼枢,默認(rèn):true
        showCircle: true,        //定位成功后用圓圈表示定位精度范圍埠忘,默認(rèn):true
        panToLocation: true,     //定位成功后將定位到的位置作為地圖中心點(diǎn),默認(rèn):true
        zoomToAccuracy:true      //定位成功后調(diào)整地圖視野范圍使定位位置及精度范圍視野內(nèi)可見(jiàn)馒索,默認(rèn):false
    });
    mapObj.addControl(geolocation);
    geolocation.getCurrentPosition(); //精準(zhǔn)定位
    // geolocation.getCityInfo();  //定位到城市
    AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
    AMap.event.addListener(geolocation, 'error', onError);      //返回定位出錯(cuò)信息
});


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

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

A. Geolocation.getCurrentPosition獲取精確位置的流程是什么樣的?
  1. 在PC端,因?yàn)樵涌诔晒β屎艿桶俳遥琂S-API會(huì)優(yōu)先調(diào)用精確IP定位服務(wù)爽哎,在IP定位失敗的時(shí)候,嘗試使用瀏覽器原生定位接口進(jìn)行定位器一,如果原生定位接口也定位失敗课锌,則返回error事件或回調(diào)error信息。定位成功之后我們會(huì)對(duì)瀏覽器定位的經(jīng)緯度結(jié)果進(jìn)行向高德坐標(biāo)的轉(zhuǎn)化祈秕,并對(duì)所有有效定位結(jié)果融合地址信息后返回complete事件或者回調(diào)complete信息渺贤。
  2. 在移動(dòng)端雏胃,如果開(kāi)發(fā)者開(kāi)啟了sdk輔助定位,那么安卓手機(jī)上我們會(huì)優(yōu)先嘗試調(diào)用sdk的定位接口志鞍,失敗之后優(yōu)先調(diào)用瀏覽器原生定位接口進(jìn)行定位瞭亮,瀏覽器定位失敗之后嘗試進(jìn)行精確IP定位,如果以上三種定位全部嘗試失敗則返回error事件或回調(diào)error信息固棚,否則和PC端的一樣统翩,定位成功之后進(jìn)行高德坐標(biāo)轉(zhuǎn)化和地址融合。
  3. 我們?cè)诙ㄎ坏幕卣{(diào)或者事件響應(yīng)中返回了message字段玻孟,message字段明確指出了每一步的成功和失敗原因唆缴。
B. 如果沒(méi)有拿到message如何獲取定位失敗錯(cuò)誤信息鳍征?

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

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

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

注釋?zhuān)喝绻ㄎ坏匠鞘屑纯蓾M足需求锄列,建議大家改用Geolocation.getCityInfo方法,可以根據(jù)IP返回用戶所在城市的基本信息惯悠,包括省邻邮、市名稱(chēng)、adcode克婶、citycode筒严、城市中心點(diǎn),城市矩形邊界等信息情萤。



百度地圖JavaScript API

簡(jiǎn)介

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

瀏覽器定位精度依賴(lài)瀏覽器自身特性肪获,IP定位的精度值為城市級(jí)別。

對(duì)于安卓WebView頁(yè)面的開(kāi)發(fā)者柒傻,可以結(jié)合定位SDK進(jìn)行輔助定位孝赫,使用方法參見(jiàn)定位SDK相關(guān)章節(jié)。

注:由于Chrome红符、iOS10等已不再支持非安全域的瀏覽器定位請(qǐng)求青柄,為保證定位成功率和精度,請(qǐng)盡快升級(jí)您的站點(diǎn)到HTTPS预侯。

提供的定位服務(wù)
接口 類(lèi)名 簡(jiǎn)介
瀏覽器定位 Geolocation 優(yōu)先調(diào)用瀏覽器H5定位接口致开,如果失敗會(huì)調(diào)用IP定位
IP定位 LocalCity 根據(jù)用戶IP 返回城市級(jí)別的定位結(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í)行完后百度會(huì)返回一段代碼并插入到你的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í)行的時(shí)候,經(jīng)過(guò)測(cè)試不管是否允許地理位置的授權(quán)雌桑,都能獲取到定位位置喇喉,只不過(guò)不授權(quán)時(shí)候獲取的應(yīng)該是IP地址的定位,授權(quán)是精確的GPS定位而已

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

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

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

百度geolocation.getCurrentPosition()這個(gè)函數(shù)里面的第一個(gè)參數(shù)是回調(diào)成功后執(zhí)行的耍目,第二個(gè)參數(shù)是回調(diào)后失敗執(zhí)行的膏斤,官網(wǎng)的地址貌似沒(méi)有寫(xiě)明白第二個(gè)參數(shù)是可以傳一個(gè)對(duì)象或者匿名函數(shù)進(jìn)去,所以導(dǎo)致很多人不知道getCurrentPosition失效的時(shí)候怎么捕捉到這個(gè)失敗的回調(diào)邪驮,下面的例子就是傳入一個(gè)失敗時(shí)候要執(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");
        }
    },
    //獲取失敗時(shí)候的回調(diào)  
    function(r) {
        console.log(r);
        alert('定位失敗');
        return {
            //設(shè)置高精度  
            enableHighAccuracy: true
        };
    }
);

如果確實(shí)因?yàn)楦鞣N原因而獲取不到回調(diào),建議這里加個(gè)定時(shí)器比較保險(xiǎn)

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

無(wú)法獲取定位的原因:應(yīng)該是鑒于該特性可能侵犯用戶的隱私,除非用戶同意沮榜,否則用戶位置信息是不可用的盘榨。還有可能是因?yàn)槟承g覽器調(diào)用了谷歌的服務(wù),所以這里會(huì)被卡蟆融。







?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末草巡,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子型酥,更是在濱河造成了極大的恐慌山憨,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,509評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件弥喉,死亡現(xiàn)場(chǎng)離奇詭異郁竟,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)由境,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門(mén)棚亩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人藻肄,你說(shuō)我怎么就攤上這事蔑舞【艿#” “怎么了嘹屯?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,875評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)从撼。 經(jīng)常有香客問(wèn)我州弟,道長(zhǎng),這世上最難降的妖魔是什么低零? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,441評(píng)論 1 293
  • 正文 為了忘掉前任婆翔,我火速辦了婚禮,結(jié)果婚禮上掏婶,老公的妹妹穿的比我還像新娘啃奴。我一直安慰自己,他們只是感情好雄妥,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布最蕾。 她就那樣靜靜地躺著,像睡著了一般老厌。 火紅的嫁衣襯著肌膚如雪瘟则。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,365評(píng)論 1 302
  • 那天枝秤,我揣著相機(jī)與錄音醋拧,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛丹壕,可吹牛的內(nèi)容都是我干的庆械。 我是一名探鬼主播,決...
    沈念sama閱讀 40,190評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼菌赖,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼干奢!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起盏袄,我...
    開(kāi)封第一講書(shū)人閱讀 39,062評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤忿峻,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后辕羽,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體逛尚,經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3 335
  • 正文 我和宋清朗相戀三年刁愿,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了绰寞。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡铣口,死狀恐怖滤钱,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情脑题,我是刑警寧澤件缸,帶...
    沈念sama閱讀 35,559評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站叔遂,受9級(jí)特大地震影響他炊,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜已艰,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3 328
  • 文/蒙蒙 一痊末、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧哩掺,春花似錦凿叠、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,779評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至誊薄,卻和暖如春履恩,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背呢蔫。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,912評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工切心, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留飒筑,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2 370
  • 正文 我出身青樓绽昏,卻偏偏與公主長(zhǎng)得像协屡,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子全谤,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容