Uniapp實(shí)現(xiàn)地圖獲取定位功能(推薦)
摘要:本文將手把手教你如何在Uniapp項(xiàng)目中集成地圖功能、實(shí)現(xiàn)定位獲取,并解決微信小程序、APP、H5三端的兼容性問題??????
一、環(huán)境準(zhǔn)備
地圖平臺(tái)選擇
- 微信小程序:騰訊地圖(強(qiáng)制使用)
- H5/APP:可自由選擇(高德/百度/谷歌地圖)
- 推薦方案:H5/APP使用高德地圖(API免費(fèi)額度高)
申請(qǐng)開發(fā)者密鑰
- 微信小程序:需在微信公眾平臺(tái)申請(qǐng)
mapKey - 高德地圖:前往高德開放平臺(tái)創(chuàng)建應(yīng)用并獲取
Web端Key和Android/iOS Key
二、配置地圖基礎(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ǔ)定位實(shí)現(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);
}
});四、多平臺(tái)適配要點(diǎn)
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 | 在微信公眾平臺(tái)申請(qǐng)并配置mapKey |
| H5定位失敗 | 非HTTPS環(huán)境 | 本地開發(fā)使用Chrome開啟--unsafely-treat-insecure-origin-as-secure |
APP返回錯(cuò)誤代碼LOCATION_FAILED | 未開啟定位權(quán)限 | 檢查manifest配置并引導(dǎo)用戶手動(dòng)開啟權(quán)限 |
| 逆地理編碼返回null | 未綁定安全域名(H5) | 在高德控制臺(tái)添加當(dāng)前域名白名單 |
注意點(diǎn)
- 統(tǒng)一坐標(biāo)系:微信小程序使用
wgs84,高德地圖用gcj02,需注意轉(zhuǎn)換 - 錯(cuò)誤兜底:定位失敗時(shí)顯示手動(dòng)選擇位置按鈕
- 性能優(yōu)化:使用
<map>組件的@regionchange事件懶加載標(biāo)記點(diǎn)
到此這篇關(guān)于Uniapp實(shí)現(xiàn)地圖獲取定位功能的文章就介紹到這了,更多相關(guān)Uniapp地圖獲取定位內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信JSSDK實(shí)現(xiàn)打開攝像頭拍照再將相片保存到服務(wù)器
這篇文章主要介紹了微信JSSDK實(shí)現(xiàn)打開攝像頭拍照再將相片保存到服務(wù)器,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
JavaScript實(shí)現(xiàn)表格動(dòng)態(tài)變色
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)表格動(dòng)態(tài)變色,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
webpack+vue-cil中proxyTable處理跨域的方法
這篇文章主要介紹了webpack+vue-cil中proxyTable處理跨域的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
layui文件上傳控件帶更改后數(shù)據(jù)傳值的方法
今天小編就為大家分享一篇layui文件上傳控件帶更改后數(shù)據(jù)傳值的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
HTML+CSS+JS實(shí)現(xiàn)完美兼容各大瀏覽器的TABLE固定列
本文給大家分享的是使用HTML+CSS+JS實(shí)現(xiàn)完美兼容各大瀏覽器的TABLE固定列的方法和示例,非常的實(shí)用,特別是在BS架構(gòu)的企業(yè)級(jí)應(yīng)用,有需要的小伙伴可以參考下。2015-04-04
JS棧stack類的實(shí)現(xiàn)與使用方法示例
這篇文章主要介紹了JS棧stack類的實(shí)現(xiàn)與使用方法,結(jié)合實(shí)例形式分析了棧的原理,以及javascript定義與使用棧的基本操作技巧,需要的朋友可以參考下2019-01-01
使用JavaScript計(jì)算前一天和后一天的思路詳解
這篇文章主要介紹了使用JavaScript計(jì)算前一天和后一天的思路,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12

