官方幫助文檔：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
進行一些簡單的配置
Uniapp提供的位置相關的服務：
https://uniapp.dcloud.net.cn/api/location/location.html
UniApp提供的地圖組件
https://uniapp.dcloud.net.cn/component/map.html
UniApp針對微信小程序，使用騰訊地圖，實現(xiàn)地圖交互+導航
文檔針對微信小程序進行設置，其他端使用這些組件還需要參考uniapp官方文檔是否支持對應的業(yè)務
認識組件和API
一、UniApp的map組件
組件屬性速查：官方文檔地址。
個人理解：地圖組件是用戶和地圖交互的核心組件，所有的顯示和選點都在map組件上實現(xiàn)
常用屬性整理：
| 屬性名 | 類型 | 默認值 | 說明 | 平臺差異說明 |
|---|---|---|---|---|
| longitude | Number | 中心經(jīng)度（重要 | ||
| latitude | Number | 中心緯度（重要 | ||
| scale | Number | 16 | 縮放級別，取值范圍為3-20 | 高德地圖縮放比例與微信小程序不同 |
| markers | Array | 標記點（重要 | ||
| polyline | Array | 路線（重要 | 飛書小程序不支持 | |
| enable-zoom | Boolean | true | 是否支持縮放 | App-nvue 2.1.5+、微信小程序2.3.0 |
| enable-traffic | Boolean | false | 是否開啟實時路況 | App-nvue 2.1.5+、微信小程序2.7.0 |
| 微信小程序、H5、百度小程序、支付寶小程序、京東小程序 | ||||
| polygons | Array.<polygon>
|
多邊形（可以畫圈 | App-nvue 2.1.5+、App-vue 3.4.3+、H5 3.4.3+、微信小程序、百度小程序、支付寶小程序 | |
| @markertap | EventHandle | 點擊標記點時觸發(fā)，e.detail = {markerId} | App-nvue 2.3.3+、H5、微信小程序、支付寶小程序 | |
| @tap | EventHandle | 點擊地圖時觸發(fā); App-nvue | 微信小程序2.9支持返回經(jīng)緯度 |
案例用法如下：
<!-- 地圖組件 參數(shù)分別是： longitude，latitude， 表示經(jīng)緯度
show-location ：顯示帶有方向的當前定位點
markers 表示地圖上的標記點 polyline 表示路線 ；enable-3D是否顯示3D樓塊
-->
<map @tap="getMapLocation" style="width: 100vw; height: 800rpx;" :latitude="reportInfo.lttd"
:longitude="reportInfo.lgtd" :markers="covers" enable-3D="true" >
</map>
markers和polyline對應的數(shù)值類型需要注意有格式要求。如下
1、markers（重要
標記點用于在地圖上顯示標記的位置 ，已數(shù)組的形式組成地圖上的標記點
| 屬性 | 說明 | 類型 | 必填 | 備注 |
|---|---|---|---|---|
| id | 標記點id | Number | 是 | marker點擊事件回調(diào)會返回此id。建議為每個marker設置上Number類型id，保證更新marker時有更好的性能。最大限制9位數(shù) |
| latitude | 緯度 | Number | 是 | 浮點數(shù)，范圍 -90 ~ 90 |
| longitude | 經(jīng)度 | Number | 是 | 浮點數(shù)，范圍 -180 ~ 180 |
| title | 標注點名 | String | 否 | 點擊時顯示，callout存在時將被忽略 |
| iconPath | 顯示的圖標 | String | 是 | 項目目錄下的圖片路徑，支持相對路徑寫法，以’/'開頭則表示相對小程序根目錄；也支持臨時路徑 |
| width | 標注圖標寬度 | Number | 否 | 默認為圖片實際寬度 |
| height | 標注圖標高度 | Number | 否 | 默認為圖片實際高度 |
-
使用maker可以實現(xiàn)在地圖上標記目標點位或者“我的”實時位置，格式舉例如下：
//標記地點 ====> 需要在地圖上繪制的點 var obj = { width: 30, height: 30, latitude: Number(self.reportInfo.lttd), longitude: Number(self.reportInfo.lgtd), iconPath: '../../../static/icon/6.png' // 成功繪制 }; //垃圾桶====> 需要在地圖上繪制的點 var bin = { id: "0", latitude: Number(24.44379), longitude: Number(118.08243), width: 20, height: 20, iconPath: '../../../static/icon/9.png', // 成功繪制 title: "垃圾桶" }; // ====> 需要在地圖上繪制的點 var bin2 = { id: "1", latitude: Number(24.44879), longitude: Number(118.09243), width: 20, height: 20, iconPath: '../../../static/icon/9.png', // 成功繪制 title: "垃圾桶" } // 這里定位了一個集合， 并將前面給的三個標記點存入 var arr = []; arr.push(obj); arr.push(bin); arr.push(bin2);
2、polyline（重要，導航必須！）
指定一系列坐標點，從數(shù)組第一項連線至最后一項
| 屬性 | 說明 | 類型 | 必填 | 備注 |
|---|---|---|---|---|
| points | 經(jīng)緯度數(shù)組 | Array | 是 | [{latitude: 0, longitude: 0}] |
| color | 線的顏色 | String | 否 | 8位十六進制表示，后兩位表示alpha值，如：#0000AA |
| width | 線的寬度 | Number | 否 | |
| dottedLine | 是否虛線 | Boolean | 否 | 默認false |
| borderColor | 線的邊框顏色 | String | 否 | |
| borderWidth | 線的厚度 | Number | 否 |
注意事項
- arrowLine ，帶箭頭的線，默認false，微信小程序開發(fā)者工具暫不支持該屬性，不用了
3、tap事件（用戶點擊地圖獲取數(shù)據(jù)
通過這個事件可以讓用戶在<map>組件上選點，用法如下：
-
利用掛載tap事件方法，比如
@tap="getMapLocation"，打印所返回的參數(shù)類型：
所以通過tap事件就可以獲取用戶點擊的詳細經(jīng)緯度 ，舉個例子就知道了：
經(jīng)度=target.detail.longitude;
緯度=target.detail.latitude;
二、UniApp的API接口（用得上的）
官方文檔速查
1、 uni.getLocation(OBJECT)
獲取當前的地理位置、速度。
這個API的使用也十分簡單，需要配置一些參數(shù)（而且這些參數(shù)都是可選的），配合一個success獲取結(jié)果res。這個res包含關鍵信息：用戶當前所在的經(jīng)緯度（完整結(jié)果如下），就這么簡單。
只是這個接口有幾個坑需要注意：
-
以下是最好是進行配置參數(shù)：（不過貌似加了用處不大，可選吧
type: 'gcj02', // 'wgs84'默認gps 坐標 ；騰訊地圖支持'gcj02'國測，減少誤差 altitude: false, // 是否返回高度 ，設置為false可以提高響應速度 isHighAccuracy: true, // 是否是高精度，選是就完事...貌似沒差多少5 -
如果有時候suceess方法進不去，進入fail方法提示
getLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json。解決方法：添加配置解決。具體方案：https://blog.csdn.net/qq_40047019/article/details/125997964
-
可以嘗試在用戶啟動界面時，向用戶獲取權(quán)限，那就需要用到下面的幾個API了
2、uni.authorize(OBJECT)
uni 的授權(quán)方法，一般搭配uni.getSetting和uni.openSetting使用。 文檔地址
-
這個方法需要特別注意，要獲取用戶的位置權(quán)限，必須配置
scope: 'scope.userLocation' -
按官方文檔的說法，必須獲取選取后才能執(zhí)行getLocation方法，所以建議將這個方法搭載在onLoad內(nèi)執(zhí)行
-
獲取權(quán)限的方法就按附件內(nèi)CV執(zhí)行就行
-
在微信小程序中，必須在
mainfest.json文件中添加配置。如下。完整版上面有截圖"permission": { "scope.userLocation": { "desc": "小程序?qū)⑹褂枚ㄎ还δ? } },
3、uni.openSetting
調(diào)起客戶端小程序設置界面，返回用戶設置的操作結(jié)果。也是個普通的獲取權(quán)限的接口，可以配合uni.authorize(OBJECT)一起用。具體看附件，配套CV使用即可
4、uni.openLocation(OBJECT)
簡單粗暴的使用應用內(nèi)置地圖查看位置。文檔地址
-
直接跳轉(zhuǎn)到微信的地圖界面，用戶可以在內(nèi)置的地圖軟件上選擇是否進行導航
-
調(diào)用這個API可以實現(xiàn)一個簡單的導航功能（
敷衍版，但也算實現(xiàn)導航 -
為了用戶更好的體驗，建議加上屬性name和address，可以提高用戶體驗
-
給個案例
uni.openLocation({ // 使用應用內(nèi)置地圖查看位置。 // 跳出去以后是可以調(diào)用系統(tǒng)自帶的導航 并顯示以下的位置信息 latitude: Number(24.44579), // 緯度(必選) longitude: Number(118.08243), // 精度 （必選 ，感覺可以用作動態(tài)的地址 name: '康佰家廈門小藥房', // 位置名 可選 address: '藥店', success: (res) => { // console.log('成功觸發(fā)導航', res); } })
騰訊地圖API接口
一、前置
網(wǎng)上已經(jīng)很多了，按照官方文檔操作也是完全沒有問題的。這里針對小程序進行設置，官方文檔地址。以下4個步驟直接參考文檔操作即可
-
申請開發(fā)者密鑰（key）：申請密鑰
-
開通webserviceAPI服務：控制臺 ->應用管理 -> 我的應用 ->添加key-> 勾選WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服務，所以使用該功能的KEY需要具備相應的權(quán)限)
-
下載微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2
-
安全域名設置，在小程序管理后臺 -> 開發(fā) -> 開發(fā)管理 -> 開發(fā)設置 -> “服務器域名” 中設置request合法域名，添加https://apis.map.qq.com
注意事項：要實現(xiàn)導航功能，就需要選擇v1.2的SDK才行
二、在UniApp對接騰訊地圖
-
將下好的SDK文件放到uniapp的項目目錄下，我這里放在util/map目錄下
-
新建一個頁面，導入這個js
-
引入SDK核心類，作為這個頁面的全局變量，記得配置KEY。如下
<template> </template> <script> import QQMapWX from '../../../util/map/qqmap-wx-jssdk.js' // 路徑修改對應的 const tMap = new QQMapWX({ key: '這里存放剛才拿到的key' }) </script>
至此，最基本的配置就完成了
三、學習 小程序JavaScriptSDK核心類 的幾個常用方法
官方文檔提供了以下方法
方法 說明 search(options:Object) 地點搜索，搜索周邊poi，比如：“酒店” “餐飲” “娛樂” “學校” 等等 getSuggestion(options:Object) 用于獲取輸入關鍵字的補完與提示，幫助用戶快速輸入 reverseGeocoder(options:Object) 提供由坐標到坐標所在位置的文字描述的轉(zhuǎn)換。輸入坐標返回地理位置信息和附近poi列表 geocoder(options:Object) 提供由地址描述到所述位置坐標的轉(zhuǎn)換，與逆地址解析的過程正好相反 direction(options:Object) 提供駕車，步行，騎行，公交的路線規(guī)劃能力 getCityList() 獲取全國城市列表數(shù)據(jù) getDistrictByCityId(options:Object) 通過城市ID返回城市下的區(qū)縣 calculateDistance(options:Object) 計算一個點到多點的步行、駕車距離
1、reverseGeocoder(Object)
提供由坐標到坐標所在位置的文字描述的轉(zhuǎn)換。輸入坐標返回地理位置信息和附近poi列表
- 簡單理解，就算給這個接口經(jīng)緯度，可以返回這個定位對應的相關詳細描述信息，包括地名、地址的組成 包含國 省 市 等等的詳細信息
需要發(fā)送的類型（必發(fā)的）：location （經(jīng)緯度信息，具體格式參考官方文檔
-
返回的結(jié)果類型非常詳細，常用的有以下幾個
-
formatted_addresses.recommend——經(jīng)過騰訊地圖優(yōu)化過的描述方式，更具人性化特點 -
address_component——地址部件，address不滿足需求時可自行拼接 -
address——簡單的地圖描述（大部分時候用這個就行了）
-
案例如下：文章來源：http://www.zghlxwxcb.cn/news/detail-425824.html
tMap.reverseGeocoder({ // 這個方法的作用 ：提供由坐標到坐標所在位置的文字描述的轉(zhuǎn)換。輸入坐標返回地理位置信息和附近poi列表
location: { // 位置坐標 發(fā)送 獲取屬性的
latitude: self.reportInfo.lttd,
longitude: self.reportInfo.lgtd
},
// 改用res,data的形式測試接收的結(jié)果
success: function(res) { // 所以，這里返回的結(jié)果就是 ： 坐標所在位置的文字描述
console.log('坐標所在位置的文字描述', res.result);
// 獲取到的參數(shù)
self.plot = res.result.formatted_addresses; // 存入了一個 經(jīng)過騰訊地圖優(yōu)化過的描述方式，更具人性化特點
self.address = res.result.address; // 也是一串地址
// 地址的組成 包含國 省 市 等等。。的詳細信息
self.addressComponent = res.result.address_component;
// console.log(province);
},
fail: function(res) {
console.log('定位獲取錯誤', res);
}
// complete: function(res) { //無論成功失敗都會執(zhí)行 測試后也是獲取一樣的內(nèi)容，表示可以注釋掉
// console.log('無論成功失敗都會執(zhí)行',res);
// }
});
附件：一個案例組件加自己寫的注釋
<template>
<view>
<view class="page-body">
<view class="page-section page-section-gap map">
<!-- 地圖組件 參數(shù)分別是： longitude，latitude， 表示經(jīng)緯度
show-location ：顯示帶有方向的當前定位點
markers 表示地圖上的標記點 polyline 表示路線 ；enable-3D是否顯示3D樓塊
-->
<map @tap="getMapLocation" style="width: 100vw; height: 800rpx;" :latitude="reportInfo.lttd"
:longitude="reportInfo.lgtd" :markers="covers" enable-3D="true" >
</map>
</view>
<view class="item">
<view class="content">
<view class="desc solid-bottom row-info">
<view class="text-black margin-top-sm overflow-2 item-title"><text
class="cuIcon-location text-green text-xxl"></text>您當前所在位置: <text
class="text-green">{{ plot.rough }}</text></view>
<view class="text-black text-sm margin-top-sm overflow-2 item-content">
系統(tǒng)已為您匹配到最近的商家位置
</view>
<view class="item-content">
編號:<text class="text-red">JN00405</text>
<text style="margin-left: 58rpx;">距您:</text> <text class="text-red">{{distance}}</text>KM
</view>
<view class="uni-button-group">
<button class="uni-button" @click="markertap"
:styles="{'borderColor':'#678D5D'}">導航</button>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import QQMapWX from '../../../util/map/qqmap-wx-jssdk.js'
const tMap = new QQMapWX({
key: '' // 存入你的key
})
export default {
data() {
return {
content: '（一）將回收價值高的可回收物率先分類投放，如報紙雜志、紙板箱、包裝盒、PET塑料瓶、易拉罐等，確保這一類可回收物不被混合垃圾污染。（二）不要將已被污染、潮濕、污漬無法清除的物品投入可回收物收集容器，如被油漬污染的餐盒、食品包裝盒等。瓶罐投放前倒空瓶內(nèi)液體并簡單清洗，有瓶蓋的不需將瓶蓋與瓶體分開投放，確保可回收物收集容器中的其他廢品不被污染，尊重和維護他人分類的成果。（三）不確定是否可以回收（或本指引中未明確說明）的廢紙、廢塑料，在未被污染的情況下，請先投放至可回收物收集容器',
// 默認坐標北京
reportInfo: {
lgtd: 116.39742,
lttd: 39.909,
},
id: 0, // 使用 marker點擊事件 需要填寫id
title: 'map',
latitude: 39.909,
longitude: 116.39742,
//第一組為匹配的垃圾桶
covers: [], //存放標記點數(shù)組
isLocated: false, // 是否被定位
//小區(qū)
plot: {},
//詳細地址
address: '',
//地址組成
addressComponent: {
city: "",
district: "",
nation: "",
province: "",
street: "",
street_number: "",
},
distance: 0.1,
}
},
methods: {
/**
* 獲取經(jīng)緯度并觸發(fā)回調(diào)函數(shù) ========== 調(diào)用這個方法 203行
* @param {Function} successCb 獲取成功回調(diào)
* @param {Function} authDenyCb 獲取失敗回調(diào)
*/
getLocationA(successCb, authDenyCb) {
const self = this // 將vue實例賦值給self以便調(diào)用
// console.log('觸發(fā)了getLocationA，參數(shù)的值分別是', successCb, authDenyCb);
// uniapp自帶的API == > https://uniapp.dcloud.net.cn/api/location/location.html
uni.getLocation({ // 這個方法就可以獲取定位
type: 'gcj02', // 'wgs84'默認gps 坐標 'gcj02'國測
altitude: false, // 是否返回高度
accuracy: 'best', // 精度值為20m
geocode: false, // 默認false，是否解析地址信息 === 文檔內(nèi)提示僅app平臺支持，這里改為false
// 接口調(diào)用成功的方法 === 正常觸發(fā)，問題已解決，可以獲取用戶所在的地址信息
success(res) {
console.log('成功獲取用戶所在地址', res)
successCb && successCb(res); // 寫法很怪，
self.isLocated = true; // 將isLocated設置為true 表示已獲取了用戶的當前定位
//獲取經(jīng)緯度res.latitude 和 res.longitude ===> 將經(jīng)緯度賦值給vue變量
self.reportInfo.lttd = res.latitude;
self.reportInfo.lgtd = res.longitude;
//標記地點 ====> 猜測是需要在地圖上繪制點數(shù)
var obj = {
width: 30,
height: 30,
latitude: Number(self.reportInfo.lttd),
longitude: Number(self.reportInfo.lgtd),
iconPath: '../../../static/icon/6.png' // 成功繪制
};
//垃圾桶====> 猜測是需要在地圖上繪制點數(shù)
var bin = {
id: "0",
latitude: Number(24.44379),
longitude: Number(118.08243),
width: 20,
height: 20,
iconPath: '../../../static/icon/9.png', // 成功繪制
title: "垃圾桶"
};
// ====> 猜測是需要在地圖上繪制點數(shù)
var bin2 = {
id: "1",
latitude: Number(24.44879),
longitude: Number(118.09243),
width: 20,
height: 20,
iconPath: '../../../static/icon/9.png', // 成功繪制
title: "垃圾桶"
}
// 這個方法是調(diào)用了測算距離的方法，算出來了兩個經(jīng)緯度之間的大致舉例
self.distance = self.getMapDistance(
self.reportInfo.lttd,
self.reportInfo.lgtd,
24.44879,
118.09243
)
// 這里定位了一個集合， 并將前面給的三個標記點存入
var arr = [];
arr.push(obj);
arr.push(bin);
arr.push(bin2);
//標記點集合賦值個給了vue對象covers == > 打印出來看看
self.covers = arr;
// console.log('vue對象covers == > 打印出來看看',self.covers );
},
fail(err) { // 定位獲取失敗后的提示
console.log('獲取定位出錯', err); // 新增
if (err.errMsg === 'getLocation:fail 頻繁調(diào)用會增加電量損耗，可考慮使用 wx.onLocationChange 監(jiān)聽地理位置變化') {
uni.showToast({
title: '請勿頻繁定位',
icon: 'none'
});
}
if (err.errMsg === 'getLocation:fail auth deny') {
// 未授權(quán)
uni.showToast({
title: '無法定位，請重新獲取位置信息',
icon: 'none'
})
authDenyCb && authDenyCb()
self.isLocated = false;
}
if (err.errMsg === 'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF') {
uni.showModal({
content: '請開啟手機定位服務',
showCancel: false
});
}
},
complete() { // 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）
console.log('進入了complete方法，用戶的定位信息：', self.reportInfo)
// tMap是騰訊地圖的對象 === 這邊開始調(diào)用了
// 用法查詢地址：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/qqMapwx
tMap.reverseGeocoder({ // 這個方法的作用 ：提供由坐標到坐標所在位置的文字描述的轉(zhuǎn)換。輸入坐標返回地理位置信息和附近poi列表
location: { // 位置坐標 發(fā)送 獲取屬性的
latitude: self.reportInfo.lttd,
longitude: self.reportInfo.lgtd
},
// 改用res,data的形式測試接收的結(jié)果
success: function(res) { // 所以，這里返回的結(jié)果就是 ： 坐標所在位置的文字描述
console.log('坐標所在位置的文字描述', res.result);
// 獲取到的參數(shù)
self.plot = res.result
.formatted_addresses; // 存入了一個 經(jīng)過騰訊地圖優(yōu)化過的描述方式，更具人性化特點
self.address = res.result.address; // 也是一串地址
// 地址的組成 包含國 省 市 等等。。的詳細信息
self.addressComponent = res.result.address_component;
// console.log(province);
},
fail: function(res) {
console.log('定位獲取錯誤', res);
}
// complete: function(res) { //無論成功失敗都會執(zhí)行 測試后也是獲取一樣的內(nèi)容，表示可以注釋掉
// console.log('無論成功失敗都會執(zhí)行',res);
// }
});
}
})
},
/**
* 重新授權(quán)并調(diào)用定位方法 == 這個方法在電腦調(diào)試可以正常運行 在頁面onload加載時調(diào)用，一解讀完畢，
* @param {Function} successCb 授權(quán)成功回調(diào)
* @param {Function} authDenyCb 授權(quán)失敗回調(diào)
*/
getAuthorize(successCb, authDenyCb) {
// authorize是uni 的授權(quán)方法，一般搭配uni.getSetting和uni.openSetting使用。 穩(wěn)定地址：https://uniapp.dcloud.net.cn/api/other/authorize.html#authorize
uni.authorize({
scope: 'scope.userLocation', // 需要獲取權(quán)限的 scope，其中scope.userLocation 指地理位置 需要配置小程序彈出時的提示信息
success: () => {
this.getLocationA(successCb, authDenyCb); // 授權(quán)成功就可以獲得當前的定位
},
fail: (err) => { // 失敗則會調(diào)用彈窗提示用戶是否進行授權(quán)
err = err['errMsg']
uni.showModal({
content: '需要授權(quán)位置信息',
confirmText: '確認授權(quán)'
})
.then((res) => { // 用戶點擊同意后，
if (res[1]['confirm']) { // 看不懂
uni.openSetting({ // 調(diào)起客戶端小程序設置界面，返回用戶設置的操作結(jié)果。 https://uniapp.dcloud.net.cn/api/other/setting.html#opensetting
success: (res) => {
if (res.authSetting['scope.userLocation']) {
// 授權(quán)成功
uni.showToast({
title: '授權(quán)成功',
icon: 'none'
})
} else {
// 未授權(quán)
uni.showToast({
title: '授權(quán)失敗',
icon: 'none'
})
}
this.getLocationA(successCb, authDenyCb) // 這里也調(diào)用了
}
})
}
if (res[1]['cancel']) {
// 取消授權(quán)
console.log('取消')
this.getLocationA(successCb, authDenyCb)
}
})
}
})
},
//手動動獲取定位 這個方法掛在<map>組件的tap事件上 ,可以目標就是通過點擊地圖更換用戶所在的當期那位置
getMapLocation(target) {
// console.log('點擊了地圖', target);
var that = this;
// 將獲取到的坐標賦值給vue對象
that.reportInfo.lttd = target.detail.latitude;
that.reportInfo.lgtd = target.detail.longitude;
// 加入標記點
var obj = {
width: 30,
height: 30,
latitude: that.reportInfo.lttd,
longitude: that.reportInfo.lgtd,
iconPath: '../../../static/icon/6.png'
};
var arr = [];
arr.push(obj);
that.covers = arr;
// 經(jīng)過測試 res的報錯信息是：chooseLocation:fail the api need to be declared in…e requiredPrivateInfos field in app.json/ext.json
// console.log('進入chooseLocation的complete:',res);
console.log('要調(diào)用txmap的參數(shù)是', that.reportInfo);
// 在這邊調(diào)用了騰訊地圖的接口： 和上面方法是一樣的作用，將坐標轉(zhuǎn)換為文字描述
tMap.reverseGeocoder({
location: {
latitude: that.reportInfo.lttd,
longitude: that.reportInfo.lgtd
},
success: function(res) {
console.log('將坐標轉(zhuǎn)換為文字描述===解析地址成功',res.result.location);
// 一樣的作用，繼續(xù)將地址信息存入vue對象中
// ====> 但問題是：一直都是獲取通用的的地址
that.plot = res.result.formatted_addresses;
that.address = res.result.address;
that.addressComponent = res.result.address_component;
let city = res.result.ad_info.city;
},
fail: function(res) {
console.log('調(diào)用接口失敗了', res);
}
});
},
//導航到指定位置 ltt lgt ====> 導航點擊時觸發(fā)的按鈕
markertap() {
let that = this
//調(diào)出地圖傳入目的地 ltt lgt
// console.log('1、點擊導航要獲取用戶的位置');
uni.getLocation({ // 1、點擊導航要獲取用戶的位置
success: (res) => { // 2、成功時的操作 ==== but 一直進不來這個方法
// 添加配置解決：https://blog.csdn.net/qq_40047019/article/details/125997964
uni.openLocation({ // 3、 使用應用內(nèi)置地圖查看位置。
// 跳出去以后是可以調(diào)用系統(tǒng)自帶的導航 并顯示以下的位置信息
latitude: Number(24.44579), // 緯度(必選)
longitude: Number(118.08243), // 精度 （必選 ，感覺可以用作動態(tài)的地址
name: '康佰家廈門小藥房', // 位置名 可選
address: '藥店',
success: (res) => {
// console.log('成功觸發(fā)導航', res);
},
fail: function() { // 失敗觸發(fā)的方法，不管了
uni.showModal({
title: '錯誤',
content: '請檢查定位是否打開',
showCancel: false,
success: function(res) {
if (res.confirm) {
console.log('用戶點擊確定');
} else if (res.cancel) {
console.log('用戶點擊取消');
}
}
})
}
});
},
fail: (res) => {
console.log('方法調(diào)用失敗', res);
}
})
},
//進行經(jīng)緯度轉(zhuǎn)換為距離的計算 === 和下面的方法進行了綁定；也不管他
Rad(d) {
return d * Math.PI / 180.0; //經(jīng)緯度轉(zhuǎn)換成三角函數(shù)中度分表形式。
},
/*
計算距離，參數(shù)分別為第一點的緯度，經(jīng)度；第二點的緯度，經(jīng)度
默認單位km // 封裝好的方法，也不管了
*/
getMapDistance(lat1, lng1, lat2, lng2) {
var radLat1 = this.Rad(lat1);
var radLat2 = this.Rad(lat2);
var a = radLat1 - radLat2;
var b = this.Rad(lng1) - this.Rad(lng2);
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
s = s * 6378.137; // EARTH_RADIUS;
s = Math.round(s * 10000) / 10000; //輸出為公里
//s=s.toFixed(2);
return s;
},
},
components: {
},
onLoad() {
console.log("in onload觸發(fā)，執(zhí)行getAuthorize")
this.getAuthorize(); // 頁面第一次加載時就會觸發(fā)這個方法
},
onShow() {
},
}
</script>
<style>
.map {
border: 9rpx solid #678D5D;
/* border-radius: 14rpx; */
}
.content {
margin-top: 100rpx;
width: 100%;
height: 307rpx;
border: 11rpx solid #;
border-radius: 17rpx;
/* color: white; */
background-color: #ffffff;
}
.item {
margin-top: 84rpx;
border: 5px none #9E9E9E;
border-radius: 25rpx;
/* margin-left: 25rpx;
margin-right: 25rpx; */
box-shadow: 4px 4px 5px #999;
padding-bottom: 30rpx;
display: block;
background-color: var(--white);
overflow: hidden;
font-weight: 700;
}
.item-title {
height: 73rpx;
/* border-bottom: 9rpx solid #678D5D; */
margin-left: 30rpx;
margin-right: 30rpx;
font-size: 28rpx;
margin-top: -48rpx;
}
.item-content {
height: 62rpx;
/* border: 3rpx solid #9E9E9E; */
margin-left: 40rpx;
margin-right: 40rpx;
font-size: 34rpx;
/* text-justify: initial; */
/* font-style: solid; */
}
.uni-button-group {
/* margin-top: 50px; */
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
}
.uni-button {
width: 228rpx;
padding: 12px 20px;
font-size: 14px;
border-radius: 12px;
line-height: 1;
margin: 0;
background-color: #678D5D;
color: white;
}
.sider-img {
width: 254rpx;
height: 306rpx;
}
.m-footer {
margin-top: 162rpx;
margin-left: 482rpx;
}
.img-footer {
margin-top: -50rpx;
border-bottom: 9rpx solid #678D5D;
width: 300rpx;
font-weight: 700;
}
</style>
基于案例實現(xiàn)一個導航模塊文章來源地址http://www.zghlxwxcb.cn/news/detail-425824.html
- 先繪制大致的一個界面Demo
- 裝載授權(quán)部分的代碼
- 裝載地圖上的點
- 裝載地圖上的線
到了這里，關于【備忘錄】uni-app的地圖相關組件操作，uni-app接入騰訊地圖API的具體實現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
