小程序调用高德地图组件



这是高德官方的详细说明高德开放平台上微信小程序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(