微信小程序 腾讯位置服务地图选点和路线规划

微信小程序使用 腾讯位置服务插件 实现 地图选点和路线规划

效果图：

实现过程

点击“开发指南”，根据对应打开网页中的接入指引进行开发实现。

腾讯位置服务地图选点:开发指南

腾讯位置服务路线规划:开发指南

实现代码

1.app.json中添加如下代码

"plugins":{"chooseLocation":{"version":"1.0.2","provider":"wx76a9a06e5b4e693e"},"routePlan":{"version":"1.0.5","provider":"wx50b5593e81dd937a"}},"permission":{"scope.userLocation":{"desc":"您的位置信息将用于小程序定位"}},

2.city.wxml

<view class="main"><view class="row" bindtap = "clickMap"><view class="hintText">地图选点</view><image class="rightArrow" src="{{rightArrow}}" ></image></view><view class="line"></view><view class="row" bindtap = "routePlan"><view class="hintText">路线规划</view><image class="rightArrow" src="{{rightArrow}}" ></image></view></view><view class="main" wx:if="{{address}}" ><view class="addressRow" bindtap = "clickMap"><view class="addressHint">地图选点位置：</view><view class="hintText">{{address}}</view></view></view>

3. city.js

// pages/city/city.jsconst chooseLocation = requirePlugin('chooseLocation')//地图选点结果插件实例Page({/*** 页面的初始数据*/data: {latitude:"",longitude:"",address:"",key: 'VEHBZ-QXKLW-YRMR4-RWZSZ-UNGOS-FLFFM',//在腾讯位置服务申请的keyreferer: '微信小程序定位', //调用腾讯位置服务相关插件的app的名称rightArrow:"../../images/rightArrow.png"},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面显示*/onShow: function () {// 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回nullif(location !=null){console.log(location)this.setData({latitude: location.latitude,longitude:location.longitude,address:location.name})}},//腾讯位置服务地图选点clickMap(){let that = this//获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限wx.getSetting({success(res){//console.log(res)//scope.userLocation 就是地理授权的标志：//res.authSetting['scope.userLocation'] == undefined 表示初始进入该页面//res.authSetting['scope.userLocation'] == false 表示非初始化进入该页面 且未授权//res.authSetting['scope.userLocation'] == true 表示地理位置授权if(res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true){//表示非初始化进入该页面 且未授权：wx.showModal({title: '请求授权当前位置',content: '需要获取您的地理位置，请确认授权',showCancel: true,cancelText: '取消',cancelColor: '#000000',confirmText: '确定',confirmColor: '#3CC51F',success: (result) => {if(res.cancel){wx.showToast({title: '拒绝授权',icon: 'none',duration: 1000});}else if (result.confirm) {//调起客户端小程序设置界面，返回用户设置的操作结果。 //设置界面只会出现小程序已经向用户请求过的权限wx.openSetting({success: (dataAu) => {if(dataAu.authSetting["scope.userLocation"] == true) {wx.showToast({title: '授权成功',icon: 'success',duration: 1000});//再次授权之后，调用腾讯位置服务的地图选点插件APIthat.callQQPlugin()}else {wx.showToast({title: '授权失败',icon: 'none',duration: 1000});}}});}}});}else if(res.authSetting['scope.userLocation'] == undefined){//调用腾讯位置服务的地图选点插件APIthat.callQQPlugin()}else{//调用腾讯位置服务的地图选点插件APIthat.callQQPlugin()}}})},//调用腾讯位置服务的地图选点插件APIcallQQPlugin(){const key = this.data.key; //使用在腾讯位置服务申请的keyconst referer = this.data.referer; //调用插件的app的名称const latitude = this.data.latitudeconst longitude = this.data.longitudeif(latitude !="" && longitude !=""){const location = JSON.stringify({latitude: latitude,longitude: longitude});wx.navigateTo({url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location});}else{wx.navigateTo({url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer });}},//腾讯位置服务路线规划routePlan(){let that = this//获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限wx.getSetting({success(res){//console.log(res)//scope.userLocation 就是地理授权的标志：//res.authSetting['scope.userLocation'] == undefined 表示初始进入该页面//res.authSetting['scope.userLocation'] == false 表示非初始化进入该页面 且未授权//res.authSetting['scope.userLocation'] == true 表示地理位置授权if(res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true){//表示非初始化进入该页面 且未授权：wx.showModal({title: '请求授权当前位置',content: '需要获取您的地理位置，请确认授权',showCancel: true,cancelText: '取消',cancelColor: '#000000',confirmText: '确定',confirmColor: '#3CC51F',success: (result) => {if(res.cancel){wx.showToast({title: '拒绝授权',icon: 'none',duration: 1000});}else if (result.confirm) {//调起客户端小程序设置界面，返回用户设置的操作结果。 //设置界面只会出现小程序已经向用户请求过的权限wx.openSetting({success: (dataAu) => {if(dataAu.authSetting["scope.userLocation"] == true) {wx.showToast({title: '授权成功',icon: 'success',duration: 1000});//再次授权之后，调用腾讯位置服务的路线规划插件APIthat.callRoutePlanPlugin()}else {wx.showToast({title: '授权失败',icon: 'none',duration: 1000});}}});}}});}else if(res.authSetting['scope.userLocation'] == undefined){//调用腾讯位置服务的路线规划插件APIthat.callRoutePlanPlugin()}else{//调用腾讯位置服务的路线规划插件APIthat.callRoutePlanPlugin()}}})},//callRoutePlanPlugin(){let plugin = requirePlugin('routePlan')//路线规划插件let key = this.data.key; //使用在腾讯位置服务申请的keylet referer = this.data.referer; //调用插件的app的名称let latitude = this.data.latitudelet longitude = this.data.longitudeif(latitude !="" && longitude !=""){let endPoint = JSON.stringify({//终点name:this.data.address,latitude: latitude,longitude: longitude})wx.navigateTo({url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer+'&endPoint= ' +endPoint});}else{console.log('请先选择地点')}}})

4.city.wxss

/* pages/city/city.wxss */page{width: 100%;background: #f7f7f7;}.main{width:100%;margin-top: 60rpx;}.row{display: flex;flex-direction: row;align-items: center;height: 100rpx;background: #ffffff;}.hintText{width:90%;font-size: 28rpx;color:#000000;font-family: PingFang SC;font-weight: 400;padding-left: 30rpx;}.rightArrow{width:36rpx;height: 36rpx;}.line{margin-left: 30rpx;height: 1rpx;background: #eeeeee;}/*选点具体结果*/.addressRow{display: flex;flex-direction: column;align-items: center;height: 200rpx;background: #ffffff;}.addressHint{width:90%;font-size: 32rpx;color:green;font-family: PingFang SC;font-weight: bold;padding-left: 30rpx;}

实现源码下载地址：

点击此处