欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Html5獲取用戶(hù)當(dāng)前位置的幾種方式

  發(fā)布時(shí)間：2021-12-27 17:14:11   作者：小鯨魚(yú)mm   我要評(píng)論
本文詳細(xì)的介紹了Html5獲取用戶(hù)當(dāng)前位置的幾種方式，主要包括html5自帶，微信API和百度地圖，具有一定的參考價(jià)值，感興趣的可以 了解一下

前言

前段時(shí)間寫(xiě)到H5獲取用戶(hù)當(dāng)前位置，百度了好多種辦法都沒(méi)實(shí)現(xiàn)，包括H5自帶的方法，具體問(wèn)題不知道出在哪里了，基本都是報(bào)錯(cuò)啥的，下面一起看看吧~

一、使用H5自帶的獲取位置

先使用navigator.geolocation判斷瀏覽器是否支持，如果不支持就提示或者使用其他方法。

if(navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((res)=> {
           console.log(res);//這里會(huì)返回經(jīng)緯度，然后還要通過(guò)經(jīng)緯度轉(zhuǎn)換地區(qū)名稱(chēng)
      });
}

 總結(jié)
1、部分手機(jī)和瀏覽器不太支持這個(gè)API，還會(huì)有警告報(bào)錯(cuò)，所以感覺(jué)這個(gè)API有點(diǎn)雞肋，不太能用得上。
2、如果需要展示地區(qū)名稱(chēng)，還需要另外引入類(lèi)似百度地圖的第三方平臺(tái)提供的js進(jìn)行經(jīng)緯度轉(zhuǎn)換地區(qū)名稱(chēng)等。
3、瀏覽器地址必須是https的，不然不支持。

二、使用百度地圖獲取位置

1、在百度地圖開(kāi)發(fā)平臺(tái)注冊(cè)賬號(hào)，并申請(qǐng)ak密鑰
2、在頁(yè)面中引用百度地圖js，(vue項(xiàng)目就在index.html中引用)

<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=qI3333RVsdret2A9999VC858Q&s=1"></script>
 </body>

3、在頁(yè)面中寫(xiě)入下面代碼（可以直接返回經(jīng)緯度和省市區(qū)名稱(chēng)等）：

mounted() {            
            //獲取當(dāng)前城市
            var geolocation=new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
                var city=r.address.city//返回當(dāng)前城市
                that.currCity = city;
            })
},

 

總結(jié)
這樣手機(jī)上就會(huì)有彈框提示獲取位置啦，這個(gè)方法可以適用于微信瀏覽器和普通瀏覽器，基本沒(méi)有問(wèn)題，沒(méi)有bug，嘗試起來(lái)！就是需要公司去申請(qǐng)ak會(huì)比較麻煩，并且也需要https才可以使用，相對(duì)于第一個(gè)還是很好用很有效果的。

三、微信js-sdk自帶的API

登錄微信平臺(tái)獲取appid和秘鑰

配置服務(wù)器信息，和js接口安全域名、網(wǎng)頁(yè)授權(quán)域名等

把配置信息文件.txt放到配置的服務(wù)器下面

查看所有的接口權(quán)限，是否有獲取用戶(hù)地理位置

通過(guò)調(diào)接口的方式獲取時(shí)間戳，簽名等

wx.ready(function () 
{
    wx.checkJsApi(
    {
        jsApiList : ['getLocation'],
        success : function (res) 
        {
            if (!res.checkResult.getLocation) {
                alert('暫不支持獲取地理位置接口，請(qǐng)升級(jí)微信版本！');
                return;
            }
        }
    }) wx.getLocation(
    {
        success : function (res) 
        {
            console.log(res)//地理位置信息都在這里
        },
        cancel : function (res) 
        {
            alert('用戶(hù)拒絕授權(quán)位置信息！');
        }
    })
})

總結(jié)

一共列舉的三種H5獲取地理位置的方式，如果不是在公眾號(hào)中非必要的情況下還是比較推薦使用類(lèi)似百度地圖這樣的第三方獲取，比較方便，并且百試百靈，一開(kāi)始不想用第三方的東西就打算用H5自帶的API弄了好久試了好多個(gè)手機(jī)和瀏覽器都沒(méi)成功，真是心碎。

到此這篇關(guān)于Html5獲取用戶(hù)當(dāng)前位置的幾種方式的文章就介紹到這了,更多相關(guān)Html5獲取用戶(hù)當(dāng)前位置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論