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

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

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

前言

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

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

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

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

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

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

1、在百度地圖開發(fā)平臺注冊賬號，并申請ak密鑰
2、在頁面中引用百度地圖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、在頁面中寫入下面代碼（可以直接返回經(jīng)緯度和省市區(qū)名稱等）：

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

 

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

三、微信js-sdk自帶的API

登錄微信平臺獲取appid和秘鑰

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

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

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

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

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

總結(jié)

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

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

相關(guān)文章

最新評論