高德地图小程序步行路线显示_微信小程序 高德地图路线规划实现过程详解

本文介绍了在微信小程序中使用高德地图API进行步行路线规划的实现过程,包括坐标系统的分析、高德地图API的使用,以及示例代码的详细讲解,帮助开发者了解如何在小程序中实现地图导航功能。
摘要由CSDN通过智能技术生成

前言

最近项目中做到相关网约车小程序。需要使用到地图中的路线规划,对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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值