微信小程序 高德地图路线规划实现过程详解

前言

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

<view class="map_title">
 <view bindtap='getFormAddress'>
  出发地:<input placeholder="出发地" type="text" name="" bindinput="" value='{{markers[0].name}}' />
 </view>
 <view bindtap='getToAddress'>
  目的地:<input placeholder="目的地" type="text" name="" bindinput="" value='{{markers[1].name}}' />
 </view>
 <button bindtap = 'getSure'>确定</button>
</view>
<view wx:if="{{state==1}}">
 <view class="map_box">
  <map id="navi_map" longitude="{{markers[0].longitude}}" latitude="{{markers[0].latitude}}" scale="12" markers="{{markers}}" polyline="{{polyline}}"></map>
 </view>
 <view class="text_box">
  <view class="text">{{distance}}</view>
  <view class="text">{{cost}}</view>
  <view class="detail_button" bindtouchstart="goDetail">详情</view>
 </view>
</view>

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

<view class="text_box" wx:for="{{steps}}" wx:for-item="i" wx:key="j">
 {{i.instruction}}
</view>

这只是个人的一个demo用例。仅做参考。其中还有很多瑕疵,不要介意哈。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2019-08-05

微信小程序地图(map)组件点击(tap)获取经纬度的方法

微信小程序中使用地图(map)组件,通过点击(tap)获取经纬度,按照官方的回应,暂时是没法做到的,从地图组件API多有残缺判断,怀疑是个实习生干的... 做个变通,适用性有限,请大家参考.基本思路就是在地图上铺满一层marker,从而通过点击marker获得经纬度. 复制代码 代码如下: <map id="map" longitude="102.324520" latitude="40.099994" scale="4"

微信小程序使用map组件实现路线规划功能示例

本文实例讲述了微信小程序使用map组件实现路线规划功能.分享给大家供大家参考,具体如下: 效果图 实现原理 1. 通过map组件标记起始点和绘制路线图: 2. 通过高德地图API获取不同类型的路线坐标点,以及耗费时间和路程. WXML <view class="flex-style"> <view class="flex-item {{status == 'car' ? 'active' : ''}}" data-status="car&

微信小程序中进行地图导航功能的实现方法

前段时间一直都在做小程序做了两个月了,其中对于小程序还是有很不理解的地方看着一些大企业的小程序自己模仿其实还是有一些难度的,我觉得学习小程序看一遍文档是不够的我们要做的是看别人的例子对着文档一一对照! 好这次我们来开始我们的开发,其实微信小程序里面是不能导航的,原因是小程序的代码最多只能有1M,他的运行内存只能有10M,一个区域地图下载下来就不止1M了所以在应用内我们无法做到导航的,但是应用外呢! 我问过很多做安卓和IOS的同僚一般如果导航这个功能不是很重要的话就会放到应用外来做这个功能,但是高

微信小程序把百度地图坐标转换成腾讯地图坐标过程详解

百度地图的经纬度放到腾讯地图里面解析地址,导致位置信息显示不正确,所以利用腾讯地图提供的API进行转换. 如果没有开发密钥(key),就到腾讯地图官方文档进行申请和下载qqmap-wx-jssdk.js 腾讯地图官方文档 申请步骤 填写信息 wxml代码 <map id='map' longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" show-loc

微信小程序 使用腾讯地图SDK详解及实现步骤

微信小程序 使用腾讯地图SDK详解及实现步骤 近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下! 使用起来非常简单,就是一些功能还有待完善. 官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 申请开发者密钥(key):申请密匙 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0 安全域名设置,需要在微信公众平台添加域名地址https://apis.map.qq.com

微信小程序+腾讯地图开发实现路径规划绘制

现象 我们想用微信小程序实现在map>组件上自定义显示导航路径,但是目前为止官方并未给出相应的方法实现,map>组件确实有绘制点对点连线的属性polyline,但是呢我们没有一系列的坐标集合也是画不出一条路径的, 更糟糕的是即便你内置微信小程序JavaScript SDK,它目前为止也不能给你相应的返回导航路径中所有坐标集合方法实现,不信你看介绍 解决方案 那我们只能用WebService API咯, 但是不要高兴的太早,根据文档,我们要的接口参数是酱紫的 那么我们开始写(下面是菜鸡版代码,非

微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例

本文实例讲述了微信小程序map组件结合高德地图API实现wx.chooseLocation功能.分享给大家供大家参考,具体如下: 声明 bug: 页面搜索返回的列表在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图采用cover-view,放在map中. 感谢: 感谢Lrj_estranged指出问题! 效果图 实现原理 通过高德地图的微信小程序开发API(getInputtips),实现关

微信小程序swiper组件实现抖音翻页切换视频功能的实例代码

微信小程序用swiper组件实现仿抖音短视频上下划动整页切换视频功能demo 利用swiper组件可简单快速编写仿抖音短视频的功能  自动播放当前页视频  翻页停止播放当前页视频 并自动播放下页视频 有其他需求也可用 cover-view 添加 收藏 点赞 评论等功能 效果图: video官方介绍: https://developers.weixin.qq.com/miniprogram/dev/component/video.html swiper官方介绍: https://developer

微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】

本文实例讲述了微信小程序实现点击按钮移动view标签的位置功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="left:{{viewLeft}}px;">我是view标签</view> <button class="btn" type="default" bindtap="changeLocat

微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】

本文实例讲述了微信小程序实现点击按钮修改view标签背景颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.操作步骤: ① 数据绑定view样式背景属性值 ② 通过逻辑文件设置该背景属性初始值 ③ 通过点击按钮修改背景属性值 3.关键代码 index.wxml文件: <view style="background:{{viewBg}};color:white;height:100px;">我是view标签</view> <button type=

微信小程序ajax实现请求服务器数据及模版遍历数据功能示例

本文实例讲述了微信小程序ajax实现请求服务器数据及模版遍历数据功能.分享给大家供大家参考,具体如下: 昨天下载了一个微信小程序的开发者工具,大概看了一下文档,简单的用他的方法实现了ajax请求. 微信小程序文档地址: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1474632113_xQVCl 头部标题和底部tab配置都在 app.json文件中,底部tab位最少两个,最多五个.下面是app.json文件代码和相关注释 { &qu

微信小程序实现获取自己所处位置的经纬度坐标功能示例

本文实例讲述了微信小程序实现获取自己所处位置的经纬度坐标功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml布局文件代码 <view>纬度:{{latitude}}</view> <view>经度:{{longitude}}</view> index.js逻辑文件代码 Page({ data: { latitude:'', longitude:'' }, onLoad: function () { var that=thi

微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例

本文实例讲述了微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能.分享给大家供大家参考,具体如下: 顶部滚动选项卡 话不多说,直接上代码 pages/home/home.wxml <scroll-view scroll-x="true" style='width: 100%; white-space:nowrap; '> <!-- tab --> <view class="tab"> <view class=&qu

关于微信小程序map组件z-index的层级问题分析

前言 说起微信小程序的map组件,可以说是良心之作了,一个组件解决了所以接入地图的所有麻烦,但是在实际小程序的试用过程中还是存在点问题的. 如下情景: 刚开始接入map组件的时候是在微信开发工具的模拟器上预览的,看起来没有一点问题,如下图: 但是在手机上真机模拟的时候就比较尴尬了,地图挡住了我底部的按钮,这个要怎么办呢?先是在百度上百度了好久,别人家写的博客都说,小程序的map组件是层级最高的,这个没办法处理; 然后就觉得凉凉了,不知道要怎么办了,难道要自己重新写个地图吗?感觉又不太现实,于是就

微信小程序封装多张图片上传api代码实例

这篇文章主要介绍了微信小程序封装多张图片上传api代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 export default class Upload{ constructor(object) { this.obj = { count:1, sizeType:['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType:['album','camera'], //

微信小程序使用map组件实现检索(定位位置)周边的POI功能示例

本文实例讲述了微信小程序使用map组件实现检索(定位位置)周边的POI功能.分享给大家供大家参考,具体如下: 声明 bug: 页面顶部分类[汽车服务.汽车销售等]列表和页脚的详细地址在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图采用cover-view,放在map中. 感谢: 感谢Lrj_estranged指出问题! 效果图 实现方法 1. 地图采用微信小程序提供的map组件: 2. 周