微信小程序微信小程序 高德地图路线规划实现过程详解高德地图路线规划实现过程详解
主要介绍了微信小程序 路线规划实现过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
前言前言
最近项目中做到相关网约车小程序。需要使用到地图中的路线规划,对3种地图进行了分析。这里稍微做一下总结:
百度地图 百度坐标 (BD-09)
腾讯地图 火星坐标(GCJ-02)
高德地图 火星坐标(GCJ-02)
微信小程序中使用的是腾讯地图作为底图。因此如果使用百度地图时,需要注意坐标的转换。此类坐标的转换函数在网上都有,这里不做过多解释
准备工作:准备工作:
1、在做小程序 ---- 路线规划之前,需要准备小程序APPID 以及相应使用地图的KEY值。
2、微信小程序API 之 位置 API wx.getLocation(OBJECT)、wx.chooseLocation(OBJECT)、wx.openLocation(OBJECT)的相应用法: https://blog.csdn.net/qq_37968920/article/details/82315755
各地图平台各地图平台-------小程序开发的官方文档小程序开发的官方文档
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,