话不多说，直接代码！！！

一、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';  //  使用在腾讯位置服务申请的keylet 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 = thisvm.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';  //    使用在腾讯位置服务申请的keylet 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

加油！奥里给！！！

（uni-app）微信小程序之腾讯地图（定位当前位置，地图标点及导航）相关推荐

微信小程序接入腾讯地图sdk地图用户自选位置。踩坑+代码实现
采坑记录: 1.微信小程序对腾讯地图的支持好.拓展强,不建议使用其他地图 2.坐标问题** 高德地图与腾讯地图使用的是 GCJ02坐标系 3.使用微信小程序的内置方法的经纬度存在偏差.解决方案看下文 ...
微信小程序使用腾讯地图进行路线规划，坐标转地址，逆地理编码，计算目的地跟自身定位的距离
微信小程序使用腾讯地图 1.介绍腾讯地图官方文档: https://lbs.qq.com/ 这里,我主要运用的是这几个api ,我在运用的过程中主要实现的功能有:地图路线规划.地址转坐标+计算距离. ...
微信小程序利用腾讯云IM发送语音 + 图片
微信小程序利用腾讯云IM发送语音 + 图片能做到这里说明你已经可以发送普通文本了如果没有的话可以看一下我的上一篇文章有完整的讲解效果图语音聊天发送图片传送 → 发送图片发送语音 ** ...
Vue/微信小程序 -- 引入腾讯视频
做项目时有个需求,就是播放腾讯视频,直接给的播放链接,比如:https://v.qq.com/x/page/b0136et5ztz.html (该链接是网上找的).最初的做法,就是用vue开发h5页面 ...
【小程序】微信小程序使用腾讯云IM（一）：登录
微信小程序使用腾讯云IM 新项目已经写了很久啦这个项目里主要的难点其实是1v1聊天.他们对比了好几家的即时通讯,最后选择了腾讯云通信.我猜,可能是因为腾讯云上说日活低于10w可以不付费吧.省钱嘛~踩 ...
腾讯小程序 java编写_微信小程序使用腾讯地图SDK详解及实现步骤
微信小程序使用腾讯地图SDK详解及实现步骤近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下! 使用起来非常简单,就是一些功能还有待完善. 官方文档:http:// ...
微信小程序集成腾讯IM，实现实时音视频通话，1V1聊天
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
微信小程序调用腾讯地图API进行驾车路线规划
微信小程序调用腾讯地图API进行驾车路线规划申请key 下载sdk 实现代码遇到的问题申请key 微信小程序的地图api是非常有限的,所以部分功能实现需要调用地图api.使用腾讯地图api过程如 ...
微信小程序使用腾讯视频插件-uniapp-详细篇（2022.1.27）
微信小程序使用腾讯视频插件-uniapp篇(无需资质审核包过) 1.添加插件:微信小程序平台-设置-第三方设置-添加插件-搜索:腾讯视频 2.在uniapp-manifest.json中-源码视图,添 ...
uni开发微信小程序解决全局分享分销问题
uni开发微信小程序解决全局分享分销问题 1. 需求 1.小程序内每个页面都要打开胶囊分享按钮并实现分销 2.分享功能应该是在用户登录之后才予以打开 3.不想做在每个页面都写分享钩子的傻逼操作 2.实 ...

（uni-app）微信小程序之腾讯地图（定位当前位置，地图标点及导航）

一、dom

二、导航插件接入

三、完整Script代码

四、效果图

总结

（uni-app）微信小程序之腾讯地图（定位当前位置，地图标点及导航）相关推荐

最新文章

热门文章