小程序调用高德地图组件
这是高德官方的详细说明高德开放平台上微信小程序SDK(http://lbs.amap.com/api/wx/summary/)。
以下是我个人在实际操作中的步骤及遇到的问题：
1、首先申请一个高德的KEY，用于让小程序调用，以便使用高德地图上的功能，这个没有什么坑，官方说明也讲的很清楚。
2、下载 微信小程序SDK,建议去高德官网下载最新版。
3、小程序上具体实现步骤：路线规划常用于出行路线的提前预览，我们提供4种类型的路线规划，分别为：驾车、步行、公交和骑行，满足各种的出行场景。这里仅说明一下驾车方面的。
4、驾车路线规划
（1）、在页面的 js 文件中，实例化 AMapWX 对象，请求进行驾车路线规划。 首先，引入 amap-wx.js 文件（amap-wx.js 从相关下载页面下载的 zip 文件解压后得到）。
var amapFile = require('path/to/amap-wx.js'); //如：../../libs/amap-wx.js
然后，构造 AMapWX 对象，并调用 getDrivingRoute 方法
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: '',
polyline: []
},
onLoad: function() {
var that = this;
var key = config.Config.key;
var myAmapFun = new amapFile.AMapWX({key: '高德Key'});
myAmapFun.getDrivingRoute({
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({
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) + '元'
});
}
},
fail: function(info){
}
})
},
goDetail: function(){
wx.navigateTo({
url: '../navigation_car_detail/navigation'
})
},
goToCar: function (e) {
wx.redirectTo({
url: '../navigation_car/navigation'
})
},
goToBus: function (e) {
wx.redirectTo({
url: '../navigation_bus/navigation'
})
},
goToRide: function (e) {
wx.redirectTo({
url: '../navigation_ride/navigation'
})
},
goToWalk: function (e) {
wx.redirectTo({
url: '../navigation_walk/navigation'
})
}
})
重点：这官方给的文档里面有很多坑，
其中的 高德key 你要改成你申请下来的一个key；
var key = config.Config.key;这句我目前没明白啥意思，注释掉了，不影响程序
最主要的是 origin: '116.481028,39.989643',
destination: '116.434446,39.90816',
这两个坐标点，官方给的是死数据，如何用活的数据呢？
origin: this.data.markers[0].longitude+','+this.data.markers[0].latitude,
destination: this.data.markers[1].longitude + ',' + this.data.markers[1].latitude,
找了很多文章才找到这个坑，希望看到这篇文章的朋友能跳过这个坑。
（2）、编写页面的 wxml 文件，搭建页面结构。
<view class="flex-style">
<view class="flex-item active" bindtouchstart="goToCar">驾车view>
<view class="flex-item" bindtouchstart="goToWalk">步行view>
<view class="flex-item" bindtouchstart="goToBus">公交view>
<view class="flex-item" bindtouchstart="goToRide">骑行view>
view>
<view class="map_box">
<map id="navi_map" longitude="116.451028" latitude="39.949643" 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>
（3）、编写页面的 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_box{
position:absolute;
top: 35px;
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;
}
（4）、运行效果如下：
（5）、步行、骑行、公交路线参考http://lbs.amap.com/api/wx/guide/route/route
5、本文的重点是在地图上确定两个点进行路线规划，两个点的坐标是自己定义的。
重点：
origin: this.data.markers[0].longitude+','+this.data.markers[0].latitude,
destination: this.data.markers[1].longitude + ',' + this.data.markers[1].latitude,
可以用wx.chooseLocation来确定这两个位置。
如有不对之处，欢迎各位批评指正。