前言

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

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

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

准备工作：

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

2、微信小程序API 之 位置 API wx.getLocation(OBJECT)、wx.chooseLocation(OBJECT)、wx.openLocation(OBJECT)的相应用法：https://plete: 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用例。仅做参考。其中还有很多瑕疵，不要介意哈。

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