（uni-app）微信小程序之腾讯地图（定位当前位置，地图标点及导航）
话不多说，直接代码！！！
一、dom
<template>
<view>
<map
id="tencentMap"
:style="[...mapStyle]"
:show-compass="showCompass"
:enable-traffic="enableTraffic"
:longitude="longitude"
:latitude="latitude"
:markers="markers"
:show-location="showLocation"
@markertap="markertap"
>map>
view>
template>
二、导航插件接入
1、在腾讯微信公众平台中， “微信小程序官方后台 > 设置 > 第三方设置 里点击 “添加插件”，搜索 “腾讯位置服务路线规划” 申请。参考地址: https://lbs.qq.com/miniProgram/plugin/pluginGuide/routePlan
2、引入插件包： 路线规划appId： wx50b5593e81dd937a
在manifest.json中添加，如图：
代码：
{
"plugins": {
"routePlan": {
"version": "1.0.12",
"provider": "wx50b5593e81dd937a"
}
},
"permission": {
"scope.userLocation": {
"desc": "位置信息效果展示"
}
}
}
3、使用插件
注：在使用导航时需要用到 腾讯位置服务 中申请的key，申请步骤自行百度
markertap(e){
let plugin = requirePlugin('routePlan');
let key = '5ZKBZ-W3TCU-LSDVC-4XJLB-KQOYO-TVBQ6'; // 使用在腾讯位置服务申请的key
let referer = 'test'; // 调用插件的app的名称
let navigation = 1 // 值为1时，开启驾车导航功能；默认不开启此功能
let endPoint = JSON.stringify({ // 终点
'name': '奥林皮克体育中心',
'latitude': 32.00834,
'longitude': 118.72495
});
wx.navigateTo({
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint + '&navigation=' + navigation
});
}
三、完整Script代码
export default {
props: {
mapStyle: {
type: Object,
default: {
width: '100%',
height: '300rpx'
}
},
showCompass: { // 是否显示指南针
type: Boolean,
default: false
},
enableTraffic: { // 是否开启实时路况
type: Boolean,
default: false
},
showLocation: { // 是否显示带有方向的当前定位点
type: Boolean,
default: true
},
},
data() {
return {
longitude: '118.72495',
latitude: '32.00834',
markers: [],
}
},
onReady() {
let vm = this
vm.map = uni.createMapContext('tencentMap', this)
vm.getLocation()
},
methods: {
// 初次位置授权
getAuthorize() {
return new Promise((resolve, reject) => {
uni.authorize({
scope: "scope.userLocation",
success: () => {
resolve(); // 允许授权
},
fail: () => {
reject(); // 拒绝授权
},
});
});
},
// 确认授权后，获取用户位置
getLocationInfo() {
const that = this;
uni.getLocation({
type: "gcj02",
success: function(res) {
that.longitude = res.longitude;
that.latitude = res.latitude;
that.markers = [
{
id:2,
latitude:32.00834,
longitude:118.72495,
callout:{
content:'奥林皮克体育中心',
color:'#000',
fontSize:10,
bgColor:'#fff',
padding:5,
display:'ALWAYS',
textAlign:'center'
}
},
]
},
});
},
// 拒绝授权后，弹框提示是否手动打开位置授权
openConfirm() {
return new Promise((resolve, reject) => {
uni.showModal({
title: "请求授权当前位置",
content: "我们需要获取地理位置信息，为您推荐附近的商家",
success: (res) => {
if (res.confirm) {
uni.openSetting().then((res) => {
if (res[1].authSetting["scope.userLocation"] === true) {
resolve(); // 打开地图权限设置
} else {
reject();
}
});
} else if (res.cancel) {
reject();
}
},
});
});
},
// 彻底拒绝位置获取
rejectGetLocation() {
uni.showToast({
title: "您拒绝了授权，无法获得周边信息",
icon: "none",
duration: 2000,
});
},
// 地图标点 点击事件
markertap(e){
let plugin = requirePlugin('routePlan');
let key = '5ZKBZ-W3TCU-LSDVC-4XJLB-KQOYO-TVBQ6'; // 使用在腾讯位置服务申请的key
let referer = 'test'; // 调用插件的app的名称
let navigation = 1 // 值为1时，开启驾车导航功能；默认不开启此功能
let endPoint = JSON.stringify({ // 终点
'name': '奥林皮克体育中心',
'latitude': 32.00834,
'longitude': 118.72495
});
wx.navigateTo({
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint + '&navigation=' + navigation
});
}
},
onReady() {
// wx请求获取位置权限
this.getAuthorize().then(() => {
// 同意后获取
this.getLocationInfo();
}).catch(() => {
// 不同意给出弹框，再次确认
this.openConfirm().then(() => {
this.getLocationInfo();
}).catch(() => {
this.rejectGetLocation();
});
});
},
}
四、效果图
总结
记录一下工作中的日常。在此期间借鉴了大佬的文章，由于时间有点久，找不到文章地址了，见谅！！如有侵权，请联系删除。
最后附上完整dome 下载地址：https://github.com/TencentLBS/TencentMapMiniProgramDemo
加油！奥里给！！！