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

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

效果图：

实现过程

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

腾讯位置服务地图选点:开发指南
腾讯位置服务路线规划:开发指南

实现代码

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.js
const 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;
}

实现源码下载地址：

点击此处

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

微信小程序使用腾讯位置服务地图选点实现地址的选取|微信小程序腾讯位置服务地图选点请求来源未被授权
效果图首先要在微信开放平台的小程序里添加插件具体配置,可以参考官方文档腾讯位置服务地图选点 | 小程序插件 | 微信公众平台 (qq.com) 同时还要申请接口的权限,不然小程序上线的时候不能 ...
微信小程序 ‘腾讯位置服务地图选点插件申请失败’
1.登录微信公众平台 2.登录后设置-第三方设置-插件管理-添加插件 3.微信小程序插件 | 腾讯位置服务将官网上的配置值复制到app.json中,切记是官网上的值不是自己生成的值!!!!然后再进 ...
微信小程序获取当前位置及地图选点功能
标题小程序获取当前位置----逆地址解析----地图选点实现功能:小程序首页定位当前城市类似于某宝: 某团: 获取当前位置: 在小程序首页创建getLocation函数并在onLoad调用首先需 ...
【微信小程序腾讯位置服务】获取用户所在城市信息实战
背景实现小程序进去后获取用户当前所在城市,然后显示该城市的数据,并且显示在导航栏和 Tab上. 微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是 ...
微信小程序腾讯位置服务城市选择器
腾讯城市选择器插件微信小程序插件 | 腾讯位置服务先看文档,下面为操作步骤 1.登录微信公众平台设置 - 第三方设置 - 插件管理 - 添加插件 - 搜索腾讯位置服务城市选择器 - 添加 2.注 ...
微信小程序接入第三方插件腾讯位置服务地图选点
微信小程序接入第三方插件腾讯位置服务地图选点 1.在小程序服务平台中添加"腾讯位置服务地图选点"插件 1.在小程序服务平台中添加"腾讯位置服务地图选点"插件微 ...
【微信小程序】腾讯位置服务地图选点服务示例
插件添加 1.插件申请接入: 在腾讯公众平台中, "微信小程序官方后台-设置-第三方服务-插件管理" 里点击 "添加插件",搜索 "腾讯位置服务地图选 ...
小程序腾讯位置服务路线规划插件申请方法
如果用以下常规的方法个人小程序大概率是通过不了的在腾讯微信公众平台中, "微信小程序官方后台-设置-第三方服务-插件管理" 里点击 "添加插件",搜索 &qu ...
腾讯位置服务地图选点组件使用示例
本文主要使用到的功能为: 1.选择地址发送(地图选点组件 ) 2.实时地址静态图 3.地图调起 ,手机查看选址组件主要是选地点的信息,如下: 在js或者数据库中保存这些信息,静态图片和地图API的调 ...

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

效果图：

实现过程

实现代码

实现源码下载地址：

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

最新文章

热门文章

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

效果图：

实现过程

实现代码

实现源码下载地址：

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

最新文章

热门文章

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

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