vue 實現(xiàn)Web端的定位功能 獲取經(jīng)緯度
更新時間：2019年08月08日 15:45:30 作者：DemoH
這篇文章主要介紹了vue 實現(xiàn)Web端的定位功能獲取經(jīng)緯度，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
首先我這里的需求呢, 是獲取當前用戶的經(jīng)緯度
經(jīng)過無數(shù)次的測試, 先后用了 騰訊/百度地圖的api，最后絕對還是高德的js APi
廢話不多說, 直接上代碼。
首先在 index.html 里面 引入
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申請的key"></script>
然后 去你需要獲取的頁面 開始寫, 我這里拿來測試用,所以只有一個App.vue 文件。
貌似已經(jīng) 很詳細了。
通過調(diào)用谷歌的api 可以實現(xiàn) 準確定位，
function onComplete(data){
// 這里面是 允許獲取位置服務(wù)后 發(fā)生的事情,這里我直接獲取想要的信息
}
function onError(data){
// 這里面是獲取定位失敗后, 執(zhí)行的事情,
// 這里我設(shè)置的是獲取失敗后， 啟用ip 定位
// 但是有一點嗷，就是不太準確, 而且安卓微信上 經(jīng)過測試,只能走這里 。
}
下面上完整代碼：
function onComplete(data){
// 這里面是 允許獲取位置服務(wù)后 發(fā)生的事情,這里我直接獲取想要的信息
}
function onError(data){
// 這里面是獲取定位失敗后, 執(zhí)行的事情,
// 這里我設(shè)置的是獲取失敗后， 啟用ip 定位
// 但是有一點嗷，就是不太準確, 而且安卓微信上 經(jīng)過測試,只能走這里 。
}
經(jīng)過測試：
ios機型，在微信內(nèi)置瀏覽器 或 其他瀏覽器 可以完美 精確定位
安卓機型， 在微信內(nèi)置瀏覽器 顯示定位失敗， 轉(zhuǎn)為ip定位， 稍有偏差，但不會超級大，但是在其他瀏覽器 可以實現(xiàn)精確定位。
總結(jié)
以上所述是小編給大家介紹的vue 實現(xiàn)Web端的定位功能 獲取經(jīng)緯度,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
詳解基于Vue2.0實現(xiàn)的移動端彈窗(Alert, Confirm, Toast)組件
這篇文章主要介紹了詳解基于Vue2.0實現(xiàn)的移動端彈窗(Alert, Confirm, Toast)組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了如何基于Vue實現(xiàn)我的錢包充值功能,文中的示例代碼簡潔易懂,具有一定的借鑒價值,有需要的小伙伴可以參考一下2024-01-01
基于Vue的前端界面實現(xiàn)日期時間實時顯示簡單代碼
今天在項目中有一個功能是要求顯示北京的實時時間,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue的前端界面實現(xiàn)日期時間實時顯示的相關(guān)資料,需要的朋友可以參考下2024-01-01
element select實現(xiàn)組件虛擬滾動優(yōu)化
本文主要介紹了element select實現(xiàn)組件虛擬滾動優(yōu)化，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
在vue項目中,和后臺交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,它是基于promise的http庫,下面這篇文章主要給大家介紹了關(guān)于Vue3引入axios封裝接口的兩種方法,需要的朋友可以參考下2022-05-05
在前端 Vue 項目打包后，如果需要訪問另一個域名下的接口，由于瀏覽器的同源策略限制，會出現(xiàn)跨域問題，本文就介紹一下vue項目打包部署跨域的實現(xiàn)步驟，感興趣的可以了解一下2023-05-05
vue3?HighCharts自定義封裝之徑向條形圖的實戰(zhàn)過程
highcharts是國外知名基于javascript的圖表庫,下面這篇文章主要給大家介紹了關(guān)于vue3?HighCharts自定義封裝之徑向條形圖的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
在vue中使用express-mock搭建mock服務(wù)的方法
這篇文章主要介紹了在vue中使用express-mock搭建mock服務(wù)的方法，文中給大家提到了在vue-test-utils 中 mock 全局對象的相關(guān)知識 ,需要的朋友可以參考下2018-11-11
keep-alive include和exclude無效問題及解決
這篇文章主要介紹了keep-alive include和exclude無效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
本文主要介紹了vue3使用reactive賦值后頁面不改變，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04