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


Posted in Javascript onAugust 05, 2019

前言

最近项目中做到相关网约车小程序。需要使用到地图中的路线规划,对3种地图进行了分析。这里稍微做一下总结:

  • 百度地图 百度坐标 (BD-09)
  • 腾讯地图 火星坐标(GCJ-02)
  • 高德地图 火星坐标(GCJ-02)

微信小程序中使用的是腾讯地图作为底图。因此如果使用百度地图时,需要注意坐标的转换。此类坐标的转换函数在网上都有,这里不做过多解释

准备工作:

1、在做小程序 ---- 路线规划之前,需要准备小程序APPID 以及相应使用地图的KEY值。

2、微信小程序API 之 位置 API wx.getLocation(OBJECT)、wx.chooseLocation(OBJECT)、wx.openLocation(OBJECT)的相应用法:https://3water.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

<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用例。仅做参考。其中还有很多瑕疵,不要介意哈。

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

Javascript 相关文章推荐
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
微信小程序 教程之事件
Oct 18 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
Element InputNumber 计数器的实现示例
Aug 03 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 #Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 #Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 #Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 #Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 #Javascript
JS 自执行函数原理及用法
Aug 05 #Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 #jQuery
You might like
VFP与其他应用程序的集成
2006/10/09 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
详解Python中with语句的用法
2015/04/15 Python
Python中有趣在__call__函数
2015/06/21 Python
python实现基本进制转换的方法
2015/07/11 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
python开发游戏的前期准备
2019/05/05 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
django+echart数据动态显示的例子
2019/08/12 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
物流专业大学应届生求职信
2013/11/03 职场文书
英文自荐信
2013/12/19 职场文书
初一军训感言
2015/08/01 职场文书
Python日志模块logging用法
2022/06/05 Python