-
2022-04-18 22:59:35
效果图:
实现:
先添加插件
在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.id const markers = this.data.markers this.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; }
更多相关内容 -
微信小程序 高德地图路线规划实现过程详解
2020-12-12 06:37:41需要使用到地图中的路线规划,对3种地图进行了分析。这里稍微做一下总结: 百度地图 百度坐标 (BD-09) 腾讯地图 火星坐标(GCJ-02) 高德地图 火星坐标(GCJ-02) 微信小程序中使用的是腾讯地图作为底图。因此如果... -
微信小程序使用map组件实现路线规划功能示例
2021-01-21 19:34:20本文实例讲述了微信小程序使用map组件实现路线规划功能。分享给大家供大家参考,具体如下: 效果图 实现原理 1. 通过map组件标记起始点和绘制路线图; 2. 通过高德地图API获取不同类型的路线坐标点,以及耗费时间和... -
JS高德地图模拟驾车路线规划绘制代码
2020-06-11 15:09:06JS高德地图模拟驾车路线规划绘制代码是一款通过高德地图获取路线的沿途坐标,从而模拟驾车路线规划。 -
百度地图根据起始点经纬度坐标确认最佳路线规划
2021-09-18 21:18:00百度地图根据起始点经纬度坐标确认最佳路线规划。参见:https://lockdatav.blog.csdn.net/article/details/120373978 -
自动驾驶商用路线规划Tier+OEM解决方案
2021-12-19 16:49:03商用自动驾驶创业战略,商用自动驾驶路线规划Tier+OEM解决方案 -
百度地图API提取定位和路线规划案例
2021-04-03 12:31:13百度地图API提取定位和路线规划案例源码,本人大四学生,热爱android,经历过培训进入职场已变成真正的android程序猿。现在做基于地图的毕设,需要路线规划和定位,于是查看研究百度地图API花了一个晚上的时间,从... -
定位路线规划android百度地图源码
2018-04-23 17:30:12百度地图定位+路线规划android源码 定位当前位置,及规划路线,划线过程 -
基于图的旅游路线规划-实验报告.doc
2021-08-27 22:07:53基于图的旅游路线规划-实验报告.doc -
谷歌路线规划.zip
2020-08-06 00:38:12谷歌路线规划,可用于谷歌地图的路线规划,源码为OC版本。内部包含的sdk若非最新版,可自行下载最新sdk替换即可 -
小程序实现map搜索/定位/检索/天气/路线规划
2019-02-28 09:19:56小程序实现map搜索/定位/检索/天气/路线规划。 小程序地图采用微信小程序提供的map组件;周边的数据坐标点通过高德地图提供的API接口,获取定位位置的周边或者指定位置周边的数据。此代码提供小程序map搜索/定位/... -
gps-route-planner:GPS路线规划器
2021-06-11 14:19:38GPS路线规划器 由 JavaScript、jQuery、谷歌地图提供支持 执照 麻省理工学院许可证 (MIT) 版权所有 :copyright: 2010 Arvid Juskaitis 介绍 此应用程序的目的是快速查找位置并创建通往所需目的地的路线。 然后将... -
新建文件夹 (4)_路线规划_matlab_
2021-10-02 05:07:55TSP问题 ,最优化方案,采用matlab求解 -
Dijkstra算法的物流配送路线规划中的最短路径研究_efvaw_
2021-10-04 12:02:55w未发货威uoipfjwuieyr9wuejd我鄂如伟3ruw98ehf我 -
transit-planner:基于传输模式的高效公交网络路线规划器
2021-05-25 19:13:08运输规划师是公共交通网络的有效路线规划师。 它的实现基于传输模式的预计算,可在大型网络上提供超快速的查询时间。 该计划程序用于在存在网络实时更新(例如延迟或连接性问题)的情况下,对传输模式的可靠性进行... -
2020Java学习路线规划.pdf
2020-08-27 09:10:012020年最新整理的Java学习路线规划图,包含详细的知识体系,从入门到精通,再到架构,总结了众多练手项目推荐。。。。 -
百度地图api绘制路线规划实例
2017-11-08 21:26:35百度地图api绘制路线规划实例;其中图中蓝色小圆圈的点为途径点,在起点与终点之间经历9个途经点,通过设置调取api自动搜索由起点到终点并且经过途径点的最优(步行)路线规划。在demo示例中对规划js做了封装。 -
微信小程序基于高德地图API出行路线规划、地图导航
2021-01-27 10:07:48miniProgramAmap 微信小程序基于高德地图API出行路线规划,地图导航 体验二维码,微信扫一扫 -
「腾讯地图」小程序插件:实时定位、路线规划一步搞定
2021-03-29 17:13:04顾名思义,「腾讯地图」插件由腾讯地图官方出品,旨在为开发者提供简单的路线多方案规划服务,可在插件中显示指定位置间的路线方案,支持驾车、公交、步行的路线规划能力及 ETA 等基础路线信息。 如果你想像「腾讯... -
smart-route:智能路线规划
2021-05-16 17:50:14smart-route 智能路线规划 -
Android 百度地图SDK(三)路线规划
2021-06-17 20:29:53智能的实时和未来出行路线规划,更精准的路线选择和耗时预测 支持驾车、跨城公交、骑行(含电动车)、步行多种智能出行方式 满足用车、物流、外卖、旅游、交通等各行业个性化路线诉求 主要讲解, 步行,自驾,公交、... -
【数学建模】基于matlab无线可充电传感器网络充电路线规划【含Matlab源码 750期】.zip
2021-09-23 21:28:18【数学建模】基于matlab无线可充电传感器网络充电路线规划【含Matlab源码 750期】.zip -
智慧银行新核心系统群实施路线规划方案.pptx
2021-04-12 09:11:12智慧银行新核心系统群实施路线规划方案 -
Android高德地图多路线规划实现.pdf
2020-09-03 19:26:34实现思路 当点击地图线段的时候获取对应坐标点 然后跟路线上的坐标点比对 如果...1.获取屏幕点击线段的坐标 在多路线规划完成后可以设置 AMap 中的 setOnPolylineClickListener 方法监听 代码如下 : // 多余代码省略 -
基于数据挖掘的最佳旅游路线规划系统设计.pdf
2021-07-14 11:27:37基于数据挖掘的最佳旅游路线规划系统设计.pdf -
基于模拟退火算法算法计算中国地图旅游最优路线规划效果,matlab2021a仿真测试。
2022-04-24 16:27:29基于模拟退火算法算法计算中国地图旅游最优路线规划效果,matlab2021a仿真测试。 -
基于数据挖掘的最佳旅游路线规划系统设计
2021-01-12 20:46:10针对传统最佳旅游路线规划系统最佳路线规划性能不佳的问题,设计一种基于数据挖掘的最佳旅游路线规划系统。系统的硬件配置为交互模块,交互模块主要由客户机与服务器构成,其中服务器的设置作用是管理数据,其组成... -
校园路线规划(哈尔滨工业大学-威海校区)
2020-04-15 15:05:11哈工大校园路线规划,用C++语言,Qt界面。应用迪杰斯特拉算法,查询最短路线。 功能:①注册登录界面;②功能选择界面:a.通过增删改来创建或修改地图;b.查询最短路线 -
155用于自动驾驶车辆路线规划的后端系统_new.pdf
2021-08-31 11:02:36155用于自动驾驶车辆路线规划的后端系统_new.pdf