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


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 相关文章推荐
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
简单的js表单验证函数
Oct 28 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 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
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
Python函数式编程
2017/07/20 Python
python中set()函数简介及实例解析
2018/01/09 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
护理学专业推荐信
2013/12/03 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
银行授权委托书样本
2014/10/13 职场文书
毕业欢送会致辞
2015/07/29 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL