vue 實(shí)現(xiàn)Web端的定位功能 獲取經(jīng)緯度
首先我這里的需求呢, 是獲取當(dāng)前用戶的經(jīng)緯度
經(jīng)過(guò)無(wú)數(shù)次的測(cè)試, 先后用了 騰訊/百度地圖的api，最后絕對(duì)還是高德的js APi
廢話不多說(shuō), 直接上代碼。
首先在 index.html 里面 引入
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申請(qǐng)的key"></script>
然后 去你需要獲取的頁(yè)面 開(kāi)始寫(xiě), 我這里拿來(lái)測(cè)試用,所以只有一個(gè)App.vue 文件。
貌似已經(jīng) 很詳細(xì)了。
通過(guò)調(diào)用谷歌的api 可以實(shí)現(xiàn) 準(zhǔn)確定位，
function onComplete(data){
// 這里面是 允許獲取位置服務(wù)后 發(fā)生的事情,這里我直接獲取想要的信息
}
function onError(data){
// 這里面是獲取定位失敗后, 執(zhí)行的事情,
// 這里我設(shè)置的是獲取失敗后， 啟用ip 定位
// 但是有一點(diǎn)嗷，就是不太準(zhǔn)確, 而且安卓微信上 經(jīng)過(guò)測(cè)試,只能走這里 。
}
下面上完整代碼：
function onComplete(data){
// 這里面是 允許獲取位置服務(wù)后 發(fā)生的事情,這里我直接獲取想要的信息
}
function onError(data){
// 這里面是獲取定位失敗后, 執(zhí)行的事情,
// 這里我設(shè)置的是獲取失敗后， 啟用ip 定位
// 但是有一點(diǎn)嗷，就是不太準(zhǔn)確, 而且安卓微信上 經(jīng)過(guò)測(cè)試,只能走這里 。
}
經(jīng)過(guò)測(cè)試：
ios機(jī)型，在微信內(nèi)置瀏覽器 或 其他瀏覽器 可以完美 精確定位
安卓機(jī)型， 在微信內(nèi)置瀏覽器 顯示定位失敗， 轉(zhuǎn)為ip定位， 稍有偏差，但不會(huì)超級(jí)大，但是在其他瀏覽器 可以實(shí)現(xiàn)精確定位。
總結(jié)
以上所述是小編給大家介紹的vue 實(shí)現(xiàn)Web端的定位功能 獲取經(jīng)緯度,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)路由懶加載的3種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Vue輸入框狀態(tài)切換&自動(dòng)獲取輸入框焦點(diǎn)的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue輸入框狀態(tài)切換&自動(dòng)獲取輸入框焦點(diǎn)的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
vue項(xiàng)目中使用fetch的實(shí)現(xiàn)方法
這篇文章主要介紹了vue項(xiàng)目中使用fetch的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue使用element-plus依賴實(shí)現(xiàn)表格增加的示例代碼
這篇文章主要為大家詳細(xì)介紹了vue使用element-plus依賴實(shí)現(xiàn)表格增加,文中示例代碼講解的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2023-12-12
Vue3中實(shí)現(xiàn)發(fā)送網(wǎng)絡(luò)請(qǐng)求功能(最新推薦)
Axios是一個(gè)基于Promise的HTTP客戶端,可以在瀏覽器和Node.js中用于發(fā)送HTTP請(qǐng)求,本文主要介紹在Vue3中實(shí)現(xiàn)發(fā)送網(wǎng)絡(luò)請(qǐng)求功能,感興趣的朋友一起看看吧2023-12-12
雙端Diff在可以解決更多簡(jiǎn)單Diff算法處理不了的場(chǎng)景，且比簡(jiǎn)單Diff算法性能更好。本文將通過(guò)示例為大家詳細(xì)講講雙端diff算法的實(shí)現(xiàn)與使用，需要的可以參考一下2022-09-09
vue中點(diǎn)擊按鈕下載文件的實(shí)現(xiàn)方式
這篇文章主要介紹了vue中點(diǎn)擊按鈕下載文件的實(shí)現(xiàn)方式,具有很的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vuejs通過(guò)filterBy、orderBy實(shí)現(xiàn)搜索篩選、降序排序數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了vuejs通過(guò)filterBy、orderBy實(shí)現(xiàn)搜索篩選、降序排序數(shù)據(jù)實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
vue實(shí)現(xiàn)輸入框的模糊查詢的示例代碼（節(jié)流函數(shù)的應(yīng)用場(chǎng)景）
這篇文章主要介紹了vue實(shí)現(xiàn)輸入框的模糊查詢的示例代碼（節(jié)流函數(shù)的應(yīng)用場(chǎng)景），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue.js通用應(yīng)用框架-Nuxt.js的上手教程
本篇文章主要介紹了Vue.js通用應(yīng)用框架-Nuxt.js的上手教程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12