高德地图小程序步行路线显示_微信小程序 高德地图路线规划实现过程详解
前言
最近项目中做到相关网约车小程序。需要使用到地图中的路线规划，对3种地图进行了分析。这里稍微做一下总结：
百度地图 百度坐标 (BD-09)
腾讯地图 火星坐标(GCJ-02)
高德地图 火星坐标(GCJ-02)
微信小程序中使用的是腾讯地图作为底图。因此如果使用百度地图时，需要注意坐标的转换。此类坐标的转换函数在网上都有，这里不做过多解释
准备工作：
1、在做小程序 ---- 路线规划之前，需要准备小程序APPID 以及相应使用地图的KEY值。
2、微信小程序API 之 位置 API wx.getLocation(OBJECT)、wx.chooseLocation(OBJECT)、wx.openLocation(OBJECT)的相应用法：https://www.gxlcms.com/article/166968.htm
各地图平台-------小程序开发的官方文档
1、高德地图： 微信小程序-路线规划,地图导航功能基于高德地图API官方文档 https://lbs.amap.com/api/wx/guide/route/route
2、百度地图： 微信小程序JavaScript API ----- http://lbsyun.baidu.com/index.php?title=wxjsapi (百度地图路线规划适用于：android / ios / web,故不适用，排除百度地图)
3、腾讯地图： 微信小程序JavaScript SDK 路线规划 --------- https://lbs.qq.com/qqmap_wx_jssdk/method-direction.html
因此使用高德地图和腾讯地图都可以进行路线规划，通过学习官方文档，了解到其实这两个平台的代码思路是一样的，以下以高德地图为例作详细的说明：
高德地图-路线规划开发：根据官方文档demo进行开发 ：https://lbs.amap.com/api/wx/guide/route/route
注意：数组数据在setData时候的使用方法
var markesName = "markers[" + 0 + "].name";
that.setData({
[markesName]: name,
})
注意需要先加载头部的相关文件
var amapFile = require('../../libs/amap-wx.js');
var config = require('../../libs/config.js');
文件config.js
var config = {
key: '1***********************'
}
module.exports.Config = config;
效果图：
相关代码：
location.js
var amapFile = require('../../libs/amap-wx.js');
var config = require('../../libs/config.js');
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
markers: [{
iconPath: "../../img/mapicon_navi_s.png",
id: 0,
latitude: 39.989643,
longitude: 116.481028,
width: 23,
height: 33
}, {
iconPath: "../../img/mapicon_navi_e.png",
id: 0,
latitude: 39.90816,
longitude: 116.434446,
width: 24,
height: 34
}],
distance: '',
cost: '',
state: 0,
polyline: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
console.log(11);
var that = this
wx.showLoading({
title: "定位中",
mask: true
})
wx.getLocation({
type: 'gcj02',
altitude: true, //高精度定位
success: function(res) {
console.info(res);
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
that.setData({
markers: [{
name: '当前位置',
latitude: latitude,
longitude: longitude
}, {
name: '您要去哪儿?',
latitude: '',
longitude: ''
}]
})
},
fail: function() {
wx.showToast({
title: "定位失败",
icon: "none"
})
},
complete: function() {
wx.hideLoading()
}
})
},
getFormAddress: function() {
var that = this;
wx.chooseLocation({
success: function(res) {
console.log(res);
var name = res.name
var address = res.address
var latitude = res.latitude
var longitude = res.longitude
var markesName = "markers[" + 0 + "].name";
var markesLatitude = "markers[" + 0 + "].latitude";
var markeslongitude = "markers[" + 0 + "].longitude";
var markesiconPath = "markers[" + 0 + "].iconPath";
that.setData({
[markesName]: name,
[markesLatitude]: latitude,
[markeslongitude]: longitude,
[markesiconPath]: "../../img/mapicon_navi_s.png"
})
console.log('address1', that.data);
},
fail: function() {
wx.showToast({
title: '定位失败',
icon: "none"
})
},
complete: function() {
//隐藏定位中信息进度
wx.hideLoading()
}
})
},
getToAddress: function() {
var that = this;
wx.chooseLocation({
success: function(res) {
console.log(res);
var name = res.name
var address = res.address
var latitude = res.latitude
var longitude = res.longitude
var markesName = "markers[" + 1 + "].name";
var markesLatitude = "markers[" + 1 + "].latitude";
var markeslongitude = "markers[" + 1 + "].longitude";
var markesiconPath = "markers[" + 1 + "].iconPath";
that.setData({
[markesName]: name,
[markesLatitude]: latitude,
[markeslongitude]: longitude,
[markesiconPath]: "../../img/mapicon_navi_e.png"
})
console.log('address1', that.data);
},
fail: function() {
wx.showToast({
title: '定位失败',
icon: "none"
})
},
complete: function() {
//隐藏定位中信息进度
wx.hideLoading()
}
})
},
/**
* 确定
*/
getSure: function() {
var that = this;
var origin = that.data.markers[0].longitude + ',' + that.data.markers[0].latitude;
var destination = that.data.markers[1].longitude + ',' + that.data.markers[1].latitude;
app.origin = origin;
app.destination = destination;
console.log('origin', origin);
console.log('destination', destination);
var key = config.Config.key;
var myAmapFun = new amapFile.AMapWX({
key: key
});
myAmapFun.getDrivingRoute({
origin: origin,
destination: destination,
// origin: '116.481028,39.989643',
// destination: '116.434446,39.90816',
success: function(data) {
var points = [];
if (data.paths && data.paths[0] && data.paths[0].steps) {
var steps = data.paths[0].steps;
for (var i = 0; i < steps.length; i++) {
var poLen = steps[i].polyline.split(';');
for (var j = 0; j < poLen.length; j++) {
points.push({
longitude: parseFloat(poLen[j].split(',')[0]),
latitude: parseFloat(poLen[j].split(',')[1])
})
}
}
}
that.setData({
state: 1,
polyline: [{
points: points,
color: "#0091ff",
width: 6
}]
});
if (data.paths[0] && data.paths[0].distance) {
that.setData({
distance: data.paths[0].distance + '米'
});
}
if (data.taxi_cost) {
that.setData({
cost: '打车约' + parseInt(data.taxi_cost) + '元'
});
}
console.log('that', that);
}
})
},
/**
* 详情页
*/
goDetail: function() {
var that = this;
wx.navigateTo({
url: '../detail/detail'
})
}
})
location.wxml
出发地：
目的地：
确定
{{distance}}
{{cost}}
详情
location.wxss
.flex-style{
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.flex-item{
height: 35px;
line-height: 35px;
text-align: center;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1
}
.flex-item.active{
color:#0091ff;
}
.map_title{
position:absolute;
top: 10px;
bottom: 110px;
left: 0px;
right: 0px;
}
.map_btn{
position:absolute;
top: 120px;
bottom: 220px;
left: 0px;
right: 0px;
}
.map_box{
position:absolute;
top: 160px;
bottom: 90px;
left: 0px;
right: 0px;
}
#navi_map{
width: 100%;
height: 100%;
}
.text_box{
position:absolute;
height: 90px;
bottom: 0px;
left: 0px;
right: 0px;
}
.text_box .text{
margin: 15px;
}
.detail_button{
position:absolute;
bottom: 30px;
right: 10px;
padding: 3px 5px;
color: #fff;
background: #0091ff;
width:50px;
text-align:center;
border-radius:5px;
}
点击详情跳转页，显示导航详细说明：
detail.js
var amapFile = require('../../libs/amap-wx.js');
var config = require('../../libs/config.js');
const app = getApp()
Page({
data: {
steps: {}
},
onLoad: function () {
var that = this;
var key = config.Config.key;
var myAmapFun = new amapFile.AMapWX({ key: key });
myAmapFun.getDrivingRoute({
origin: app.origin,
destination: app.destination,
success: function (data) {
if (data.paths && data.paths[0] && data.paths[0].steps) {
that.setData({
steps: data.paths[0].steps
});
}
},
fail: function (info) {
}
})
}
})
detail.wxml
{{i.instruction}}
这只是个人的一个demo用例。仅做参考。其中还有很多瑕疵，不要介意哈。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源：php中文网
高德地图小程序步行路线显示_微信小程序 高德地图路线规划实现过程详解相关推荐
- 高德地图小程序步行路线显示_微信小程序----map路线规划
声明 bug: 页面脚的步行.骑行.驾车区域在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图 ...
- 高德地图小程序步行路线显示_微信小程序之：小程序接入高德地图SDK
前言 最近在捣腾小程序,想开发一个自己的小程序,过一把独立开发的瘾. 自己设计,自己搞数据,自己找图标,自己决定要或者不要什么功能,完全跟着心走,目前体验下来,感觉还是蛮爽的.比在公司产品要你做什么你 ...
- python天气查询小程序加背景图_微信小程序开发背景图显示功能
这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image只能 ...
- 小程序全局悬浮窗_微信小程序悬浮窗弹出怎么实现?
微信小程序悬浮窗弹出怎么实现?很多的微信小程序管理员会在微信小程序界面开发微信小程序悬浮窗弹出功能,接下来小编会为大家介绍微信小程序悬浮窗弹出关注实现的全部步骤哦. 微信小程序悬浮窗弹出怎么实现? 微 ...
- 小程序商店刷榜_微信小程序游戏跳一跳刷榜原理解析！
最近微信出了一个"跳一跳"的小游戏,这个游戏其实在之前有手机端版本,无奈微信借助强大的用户把这游戏又拿起来弄火了,而且通过最新版的微信可以看出,微信已经开始重视小程序的入口释放了, ...
- 微信小程序存在的风险_微信小程序开发技术风险存在，如何规避是重点
微信小程序开发技术风险存在,如何规避是重点 微信小程序自上线以来已经历经三年的时间,不断推陈出新,推展业务,如今已形成了一定规模和影响力,线上购物.在线点餐.预订服务.便捷出行.小游戏等多种多样的小程 ...
- 微信小程序存在的风险_微信小程序存在哪些风险
微信小程序存在哪些风险?之前一直在给大家爱关于微信小程序的各种好处,但是它其实也是存在一定的风险的,今天小编就来给大家讲一下微信小程序都存在哪些风险. 由于微信主程序会通过 JS 接口向小程序暴露规定 ...
- 微信小程序超级占内存_微信小程序占用内存小，用户再也不用担心内存不足问题了...
内存占用小,微信小程序,让用户再也不用担心小程序不足内存问题了,时下,一站式支持常用APP(手机应用软件)的微信小程序受到市民青睐. 微信小程序,是一种不需要下载安装即可使用的应用,它实现了应用&qu ...
- 小程序商店刷榜_微信小程序怎么通过“硬广”“软广”来运营引流？运营干货...
随着互联网的飞速发展,如今微信小程序已经成为家喻户晓的一款应用了,生活中随处可见的微信小程序成为了许多人日常生活中必不可少的应用.那么对于小程序商家来说营销策划方案显得格外重要,如果想要引入更多流量用 ...
最新文章
- 小米 samba linux,不折腾会死：CentOS7访问小米路由（Samba服务）
- 自由是有代价的：聊聊这几年尝试的道路
- mysql+挂马代码_转载：挂马代码大全
- js fn无法访问，不报错
- 实战 Comet 应用程序开发
- mysql 排序后在查询
- php 有序数组,php 归拢两个有序数组
- 【离散数学】集合论 第三章 集合与关系(4) 集合的归纳定义、归纳证明、数学归纳法第一/二原理
- 修改Oracle密码
- jsp九大内置对象的作用及用法
- SVN、GIT图标不显示解决方案
- unity获取obs虚拟摄像头
- 7.用户登陆，用户退出，记住用户名和密码
- 她全奖赴海外读博，一作发Science，毅然回国后任东南大学教授！
- JWT signature does not match locally computed signature. JWT validity cannot be asserted and should
- android九宫格控件,IKNinePhotoView是一个开源的Android九宫格控件
- 仿某App锁屏页Gallery
- 航空专场 | 无人机设计仿真流程讲解与案例实操
- c语言航空订票系统程序设计,航空订票系统C语言版.doc
- Spread for WPF-Silverlight 新功能使用指南