小程序插件引入(地铁图/路线规划/地图选点/城市选择器)

小程序插件官方地址–腾讯

初始化

这边使用的是腾讯家的插件,所以我们要按照他家的要求一步一步来。

首先我们要申请一个key值(申请key值是去腾讯地图开发平台去找)
然后在小程序里面添加插件 (这2步是上方官方地址的入门有介绍)
然后我们就开始引入

引入

然后根据官方的介绍引入https://lbs.qq.com/miniProgram/plugin/pluginGuide/subway

app.json

引入插件包

   // 地铁图插件"plugins": {"subway": {"version": "1.0.10","provider": "wx6aaf93c4435fa1c1"}}// 路线规划插件"plugins": {"routePlan": {"version": "1.0.12","provider": "wx50b5593e81dd937a"}}// 地图选点插件"plugins": {"chooseLocation": {"version": "1.0.6","provider": "wx76a9a06e5b4e693e"}}// 城市选择器插件"plugins": {"citySelector": {"version": "1.0.0","provider": "wx63ffb7b7894e99ae"}}

设置定位授权

 "permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序定位"}

参考页面1

这个页面包括传输携带经纬度与名称，然后这边你可以来接收

参考页面2

效果图

这边选择时会显示对应的经纬度与位置的变化

地图选点案例

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>
<view class="main" wx:if="{{address}}" ><view class="addressRow" bindtap = "clickMap"><view class="addressHint">地图选点位置：</view><view class="hintText">{{address}}</view></view>
</view>

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;}

// pages/city/city.js
const chooseLocation = requirePlugin('chooseLocation') //地图选点结果插件实例
Page({/*** 页面的初始数据*/data: {latitude: "",longitude: "",address: "",key: '64ABZ-PMWCQ-EYH5D-G4H4G-3R3LH-F2BGN', //在腾讯位置服务申请的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('请先选择地点')}}
})

小程序插件引入(地铁图/路线规划/地图选点/城市选择器)相关推荐

小程序之引入腾讯路线规划插件实现地图路线导航功能
在小程序内部插入腾讯地图实现起点到终点的路程规划效果图如下: 一:申请路线规划插件 1.在微信公众平台申请插件,登陆小程序账号,"登录"->"设置"- ...
微信小程序插件引入，地铁图插件、地图选点插件、地图选点插件
如果用微信小程序插件需要开发者秘钥:申请秘钥第一步:记住下面内容一定要写在app.json这个文件里 "plugins": {"subway": {" ...
小程序腾讯位置服务路线规划插件申请方法
如果用以下常规的方法个人小程序大概率是通过不了的在腾讯微信公众平台中, "微信小程序官方后台-设置-第三方服务-插件管理" 里点击 "添加插件",搜索 &qu ...
微信小程序uniapp高德开放平台路线规划1对多导航路线方法记录
在高德开放平台申请key并下载sdk:amap-wx.js放到pages同级目录libs里面 <template><view class="content"> ...
如何开发引入小程序插件
一般来讲各个小程序开放平台对于插件开发的开放范围有一定的限制,例如微信小程序平台开放了22个行业相关的插件开发,其中对医疗服务.金融业.文娱.社交等行业还有进一步的特殊限制. 在了解小程序插件的开发规 ...
小程序插件的开发到引入，这一篇文章就够了
一.小程序插件功能介绍 1.如何理解插件插件,英文名可称作"Plug-in.Plugin.add-in.addin.add-on.addon或extension",是一个依附于主 ...
微信小程序中使用echarts图
嗨喽大家好,我是老黑.最近这段时间完成了一个功能,那就是在微信小程序中引入了echarts图,也算是对这段时间的工作的一个总结吧.这个功能自己花费了很长的时间才整出来.后来自己反省了以下,总结了以 ...
一文说透小程序插件及其作用价值
最近工作接触小程序插件比较多,就想着不如跟大家系统分享一下小程序插件相关的内容. 首先,我们要先弄清楚小程序插件究竟是什么? 简单来说,小程序插件就是可被添加到小程序内直接使用的功能组件.插件依附于主 ...
「腾讯地图」微信小程序插件：提供简单的路线多方案规划服务
上期,我们在<「腾讯视频」微信小程序插件介绍>一文中介绍了「腾讯视频」小程序插件的意义.使用场景以及使用方法. 今天我们会与大家分享一款同样优秀的小程序插件--「腾讯地图」插件,从使用场景 ...

小程序插件引入(地铁图/路线规划/地图选点/城市选择器)

初始化

引入

app.json

效果图

地图选点案例

小程序插件引入(地铁图/路线规划/地图选点/城市选择器)相关推荐

最新文章

热门文章