微信小程序实现规划路线

背景: 我们是要实现,首先把一个具体的位置标记在地图上,点击规划路线之后,可以将当前位置到标记位置形成一条路线

首先配置一下app.json

    "plugins": {"routePlan": {"version": "1.0.18","provider": "wx50b5593e81dd937a"}},"permission": {"scope.userLocation": {"desc": "你的位置将用于定位"}}

以下代码实现根据自己给出的地址标记

qqmap-wx-jssdk.min的下载链接 JavaScriptSDK v1.2

* 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this//腾讯地图// 引入SDK核心类//qqmap-wx-jssdk.min需要你下载引入到自己的项目var QQMapWX = require('../../../../utils/qqmap-wx-jssdk.min');// 实例化API核心类var qqmapsdk = new QQMapWX({key: '自己的key' // 必填});//调用地址解析接口qqmapsdk.geocoder({//获取表单传入地址address: that.data.company.address,success: function (res) { //成功后的回调var res = res.result;var latitude = res.location.lat;var longitude = res.location.lng;//根据地址解析在地图上标记解析地址位置that.setData({ //赋值longitude: longitude,latitude: latitude,markers: [{latitude,longitude }]})// console.log(that.data.latitude,that.data.longitude)},fail: function (error) {console.error(error);},// complete: function (res) {// console.log(res);// },})},

以下实现规划路线的功能

//goRouterPlan是一个按钮goRouterPlan() {let plugin = requirePlugin('routePlan');let key = '000000000'; //使用在腾讯位置服务申请的keylet referer = ''; //调用插件的app的名称console.log(this.longitude,)let endPoint = JSON.stringify({ //终点'name':this.data.company.address,'latitude': this.data.latitude,'longitude':this.data.longitude});wx.navigateTo({url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint});},

微信小程序实现规划路线相关推荐

高德地图小程序步行路线显示_微信小程序高德地图路线规划实现过程详解
前言最近项目中做到相关网约车小程序.需要使用到地图中的路线规划,对3种地图进行了分析.这里稍微做一下总结: 百度地图百度坐标 (BD-09) 腾讯地图火星坐标(GCJ-02) 高德地图火星坐标 ...
腾讯位置服务+微信小程序，一文告诉你程序员为什么不会坐过站！
引言 1.1「腾讯位置服务」是什么? 立足生态,连接未来腾讯位置服务平台依托庞大的数据生态,以定位.地图展示.地点搜索.路线规划.导航.室内图.海外图等位置服务能力和LBS大数据能力为基础,面向开发 ...
基于微信小程序Map标签及高德地图开源方法实现路径导航
微信小程序自带地图map标签,他是基于canvas画图功能进行的地图渲染,同时依赖微信的getlocation获取经纬度,绘制周边地图.地图上可以标点,画线,查看当地地理信息.但是自带的导航功能模块不 ...
微信小程序map组件地图定位当前位置
小程序map组件的应用方式:简单版 wxml: <map id="map" latitude="{{latitude}}" longitude=" ...
小程序嵌套h5页面_快速小程序开发之微信小程序内嵌 H5
简介:微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰.本篇博文将从业务选型,微信小程序后台配置,使用 web-view 完成登录业务以 ...
微信小程序开发优势，小程序定制开发的优势
微信小程序问世以后就一直很受欢迎,微信小程序也是一种新型的营销方法,在一定程度上处理线上与线下遭遇的窘境,因此许多企业都是在开展定制小程序开发设计,那样小程序开发设计的优点究竟有哪些呢? 优点一:合理 ...
微信小程序使用腾讯地图进行路线规划，坐标转地址，逆地理编码，计算目的地跟自身定位的距离
微信小程序使用腾讯地图 1.介绍腾讯地图官方文档: https://lbs.qq.com/ 这里,我主要运用的是这几个api ,我在运用的过程中主要实现的功能有:地图路线规划.地址转坐标+计算距离. ...
高德地图小程序步行路线显示_微信小程序----map路线规划
声明 bug: 页面脚的步行.骑行.驾车区域在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图 ...
微信小程序调用腾讯地图API进行驾车路线规划
微信小程序调用腾讯地图API进行驾车路线规划申请key 下载sdk 实现代码遇到的问题申请key 微信小程序的地图api是非常有限的,所以部分功能实现需要调用地图api.使用腾讯地图api过程如 ...

微信小程序实现规划路线

微信小程序实现规划路线相关推荐

最新文章

热门文章