Uniapp實現(xiàn)地圖獲取定位功能(推薦)
摘要:本文將手把手教你如何在Uniapp項目中集成地圖功能、實現(xiàn)定位獲取,并解決微信小程序、APP、H5三端的兼容性問題??????
一、環(huán)境準(zhǔn)備
地圖平臺選擇
- 微信小程序:騰訊地圖(強制使用)
- H5/APP:可自由選擇(高德/百度/谷歌地圖)
- 推薦方案:H5/APP使用高德地圖(API免費額度高)
申請開發(fā)者密鑰
二、配置地圖基礎(chǔ)功能
2.1 微信小程序配置
manifest.json配置
"mp-weixin": { "appid": "你的小程序ID", "setting": { "urlCheck": false }, "usingComponents": true, "permission": { "scope.userLocation": { "desc": "需要獲取您的位置以提供地圖服務(wù)" } }, "requiredPrivateInfos": ["getLocation"] }
頁面中使用map組件
<map id="myMap" style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" show-location ></map>
2.2 H5/APP配置(以高德地圖為例)
manifest.json注入SDK
"h5": { "sdkConfigs": { "maps": { "amap": { "key": "你的高德Web端Key" } } } }, "app": { "maps": { "amap": { "iosKey": "iOS端Key", "androidKey": "Android端Key" } } }
通過uni.chooseLocation
調(diào)用地圖
uni.chooseLocation({ success: (res) => { console.log('位置名稱:' + res.name); console.log('經(jīng)緯度:', res.latitude, res.longitude); } });
三、獲取用戶定位
3.1 基礎(chǔ)定位實現(xiàn)
// 獲取經(jīng)緯度 uni.getLocation({ type: 'wgs84', // 微信小程序必須為wgs84 success: (res) => { this.latitude = res.latitude; this.longitude = res.longitude; }, fail: (err) => { uni.showToast({ title: '獲取定位失敗', icon: 'none' }); } });
3.2 定位轉(zhuǎn)具體地址(逆地理編碼)
// 需配合高德API(H5/APP示例) import amap from '@/common/amap-wx.js'; // 從高德官網(wǎng)下載SDK const amapPlugin = new amap.AMapWX({ key: '你的高德Web端Key' }); amapPlugin.getRegeo({ location: `${longitude},${latitude}`, success: (data) => { console.log('詳細(xì)地址:', data[0].regeocodeData.formatted_address); } });
四、多平臺適配要點
4.1 條件編譯處理差異
<!-- 微信小程序使用原生map組件 --> <!-- #ifdef MP-WEIXIN --> <map ...></map> <!-- #endif --> <!-- H5/APP使用第三方地圖 --> <!-- #ifdef H5 || APP --> <web-view :src="amapUrl"></web-view> <!-- #endif -->
4.2 權(quán)限配置
Android:在manifest.json
中添加:
"android": { "permissions": [ "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>", "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>" ] }
iOS:需在manifest.json
中勾選Location usage description
五、常見問題及解決方案
問題現(xiàn)象 | 原因分析 | 解決方案 |
---|---|---|
微信小程序地圖不顯示 | 未配置mapKey | 在微信公眾平臺申請并配置mapKey |
H5定位失敗 | 非HTTPS環(huán)境 | 本地開發(fā)使用Chrome開啟--unsafely-treat-insecure-origin-as-secure |
APP返回錯誤代碼LOCATION_FAILED | 未開啟定位權(quán)限 | 檢查manifest配置并引導(dǎo)用戶手動開啟權(quán)限 |
逆地理編碼返回null | 未綁定安全域名(H5) | 在高德控制臺添加當(dāng)前域名白名單 |
注意點
- 統(tǒng)一坐標(biāo)系:微信小程序使用
wgs84
,高德地圖用gcj02
,需注意轉(zhuǎn)換 - 錯誤兜底:定位失敗時顯示手動選擇位置按鈕
- 性能優(yōu)化:使用
<map>
組件的@regionchange
事件懶加載標(biāo)記點
到此這篇關(guān)于Uniapp實現(xiàn)地圖獲取定位功能的文章就介紹到這了,更多相關(guān)Uniapp地圖獲取定位內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript中的previousSibling和nextSibling的正確用法
這篇文章主要介紹了javascript中的previousSibling和nextSibling的正確用法的相關(guān)資料,需要的朋友可以參考下2015-09-09js判斷手機是否安裝并打開app,未安裝則安裝app【兼容Android、ios,親測可用】
這篇文章主要介紹了js判斷手機是否安裝并打開app,未安裝則安裝app,通過調(diào)用瀏覽器判斷app,兼容Android、ios等系統(tǒng),,需要的朋友可以參考下2023-05-05JS實現(xiàn)動態(tài)生成表格并提交表格數(shù)據(jù)向后端
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)動態(tài)生成表格并提交表格數(shù)據(jù)向后端的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-01-01JavaScript股票的動態(tài)買賣規(guī)劃實例分析上篇
這篇文章主要介紹了JavaScript對于動態(tài)規(guī)劃解決股票問題的真題例舉講解。文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08