微信小程序路线规划导航，选择起点和终点路线规划

效果图：

实现：

先添加插件

微信小程序插件 | 腾讯位置服务

腾讯位置服务路线规划 | 小程序插件 | 微信公众平台

在app.json添加插件：

"plugins": {"routePlan": {"version": "1.0.19","provider": "wx50b5593e81dd937a"}}

代码：

// pages/discovery/index.js
const app = getApp()
import {wxAppStop
} from '../../utils/util'
import markers from './markers.js'
let plugin = requirePlugin('routePlan');
let key = 'QHMBZ-HR3CO-CJ6WM-SS4CM-4PINO-2ZBAM'; //使用在腾讯位置服务申请的key
let referer = '红狼'; //调用插件的app的名称
var isQiDian = "";
var isZhongDian = "";
Page({/*** 页面的初始数据*/data: {isStop: false,longitude: '87.5939',latitude: '43.83356',markers:markers},//显示对话框showModal: function (e) {var idx = e.detail.markerId;if(isQiDian){console.log('222222222222')isZhongDian = idx;this.goDaoHang()}else if(isZhongDian){console.log('3333333333')this.goDaoHang()}else{isQiDian = idx;console.log('1111111111')}},goDaoHang(){this.setData({goDaoHang:true})},gogogo(){// 搜索到的经纬度结果打开地图进行导航var e_latitude = Number(this.data.markers[isZhongDian].latitude);var e_longitude = Number(this.data.markers[isZhongDian].longitude);var s_latitude = Number(this.data.markers[isQiDian].latitude);var s_longitude = Number(this.data.markers[isQiDian].longitude);let startPoint = JSON.stringify({ //终点'name': this.data.markers[isQiDian].callout.content,'latitude': s_latitude,'longitude': s_longitude});let endPoint = JSON.stringify({ //终点'name': this.data.markers[isZhongDian].callout.content,'latitude': e_latitude,'longitude': e_longitude});wx.navigateTo({url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint + '&startPoint=' + startPoint}); },// 定位changeLocation(e) {const id = e.currentTarget.dataset.idconst markers = this.data.markersthis.setData({longitude: markers[id].longitude,latitude: markers[id].latitude})},onLoad: function (options) {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

wxml

<van-empty image="error" wx:if="{{isStop}}" description="小程序维护，无法使用" /><view wx:else><map scale="18" markers="{{markers}}" class="school" id="schoolMap" longitude="{{longitude}}" latitude="{{latitude}}"bindmarkertap="showModal"></map><view class="option"><button wx:if="{{goDaoHang}}" catchtap="gogogo">开始导航</button><block wx:for="{{markers}}" wx:key="index"><button class="btn" bindtap="changeLocation" data-id="{{item.id}}">{{item.callout.content}}</button></block></view>
</view>

wsxx

.school{width: 100%;height: 1000rpx;
}
.option{padding: 30rpx;
}
.btn{font-size: 26rpx;display:inline-block;margin: 4rpx 8rpx;
}

微信小程序路线规划导航，选择起点和终点路线规划相关推荐

微信小程序调用腾讯地图API进行驾车路线规划
微信小程序调用腾讯地图API进行驾车路线规划申请key 下载sdk 实现代码遇到的问题申请key 微信小程序的地图api是非常有限的,所以部分功能实现需要调用地图api.使用腾讯地图api过程如 ...
在微信小程序中打开地图选择位置功能
在微信小程序中打开地图选择位置功能前言首先查看效果一.准备工作 1-1. **下载小程序地理定位** ,[qqmap-wx-jssdk.js](https://lbs.qq.com/miniPr ...
微信小程序制作顶部导航栏
1问题描述使用微信小程序开发者工具制作顶部导航栏. 2算法描述首先就是对微信小程序开发者工具的配置,官网搜索后进入,选择稳定版,Windows64位下载. 然后点开开发者工具,选择小程序,点击图片 ...
微信小程序--动态设置导航栏颜色
微信小程序--动态设置导航栏颜色既然要动态设置导航栏颜色,估计自定义导航栏也跑不了关于动态设置导航栏颜色,微信小程序官方文档给出了一个API: wx.setNavigationBarColor ...
微信小程序界面从右边滑出_微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)...
本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标--YDUI的Popup组件点击列表图标--左侧的菜单栏显示--点击关闭按钮或者右侧的遮罩层--左侧菜单栏关闭 ...
微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
微信小程序如何在地图选择地址并返回经纬度
微信小程序如何在地图选择地址并返回经纬度微信小程序的地址管理中,经常需要获取地址的详细地址信息和地址经纬度信息实现效果: var that = thiswx.chooseLocation({suc ...
微信小程序之顶部导航栏（选项卡）实例 —— 微信小程序实战系列（1）
需求:顶部导航栏效果图: wxml:  <view class="navbar"><text wx:for="{{na ...
微信小程序——沉浸式导航栏实现
微信小程序--沉浸式导航栏实现微信小程序中导航栏一般来说是默认的展示标题等等,可以做的样式改变仅仅能通过配置一些官方提供的属性来实现.除此之外小程序还提供了navigationStyle这个属性可以 ...

微信小程序路线规划导航，选择起点和终点路线规划

微信小程序路线规划导航，选择起点和终点路线规划相关推荐

最新文章

热门文章