微信小程序使用高德地图-即速应用

微信小程序—-高德地图开发应用（获取key）

1.利用高德开发平台创建应用

http://lbs.amap.com/dev/index
小程序

2、点击创建新应用进入创建模态框

小程序

3.添加新Key

在创建的应用上点击”添加新Key”按钮。
小程序

得到KEY

小程序

微信小程序—-map路线规划

进入页面直接定位到当前位置，输入目的地！

案例代码：

WXML：

view class="tui-map"  map id="map" longitude="{{currentLo}}" latitude="{{currentLa}}" scale="{{scale}}" markers="{{markers}}" polyline="{{polyline}}"  include-points="{{includePoints}}" show-location style="width: 100%; height: 100%;"/map/viewview class="tui-map-search" bindtap="getAddress"   icon size='20' type='search' class='tui-map-search-icon'/icon   input class="tui-map-input" placeholder="搜索" focus="{{focusStatus}}"/input/viewview class="tui-search-bottom {{show ? '' : 'tui-hide'}}"  view class="page-group"    view class="page-nav-list {{statusType == 'car' ? 'active' : ''}}" data-type="car" bindtap="goTo"驾车/view    view class="page-nav-list {{statusType == 'walk' ? 'active' : ''}}" data-type="walk" bindtap="goTo"步行/view    view class="page-nav-list {{statusType == 'ride' ? 'active' : ''}}" data-type="ride" bindtap="goTo"骑行/view  /view  view class="tui-warn"    {{distance}}米  /view  view class="tui-warn"    {{duration}}分钟  /view/view

var amapFile = require('../../src/js/amap-wx.js');Page({  data: {    key: 'c290b7e016c85e8f279b2f80018c6fbf',    show: false,    currentLo : null,    currentLa : null,    newCurrentLo : null,    newCurrentLa : null,    distance : 0,    duration : 0,    markers : null,    scale: 16,    polyline: null,    statusType: 'car',    includePoints:[]  },  onLoad(){    var _this = this;    wx.getLocation({      success(res){        _this.setData({           currentLo: res.longitude,           currentLa: res.latitude,          includePoints: [{            longitude: res.longitude,            latitude: res.latitude          }],          markers: [{            id: 0,            longitude: res.longitude,            latitude: res.latitude,            title: res.address,            iconPath: '../../src/images/navi_s.png',            width: 32,            height: 32          }]        });      }    })  },  getAddress(e){    var _this = this;    wx.chooseLocation({      success(res){        var markers = _this.data.markers;        markers.push({          id: 0,          longitude: res.longitude,          latitude: res.latitude,          title: res.address,          iconPath: '../../src/images/navi_e.png',          width: 32,          height: 32        });        var points = _this.data.includePoints;        points.push({          longitude: res.longitude,          latitude: res.latitude        });        _this.setData({          newCurrentLo: res.longitude,          newCurrentLa: res.latitude,          includePoints: points,          markers: markers,          show:true        });        _this.getPolyline(_this.data.statusType);      }    });  },  drawPolyline(self,color){    return {      origin: this.data.currentLo + ',' + this.data.currentLa,      destination: this.data.newCurrentLo + ',' + this.data.newCurrentLa,      success(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])              })            }          }        }        self.setData({          distance: data.paths[0].distance,          duration: parseInt(data.paths[0].duration/60),          polyline: [{            points: points,            color: color,            width: 6,            arrowLine: true          }]        });      }    }  },  getPolyline(_type){    var amap = new amapFile.AMapWX({ key: this.data.key });    var self = this;    switch (_type){      case 'car':        amap.getDrivingRoute(this.drawPolyline(this,"#0091ff"));        break;      case 'walk':        amap.getWalkingRoute(this.drawPolyline(this, "#1afa29"));        break;      case 'ride':        amap.getRidingRoute(this.drawPolyline(this, "#1296db"));        break;      default:        return false;    }  },  goTo(e){    var _type = e.currentTarget.dataset.type;    this.setData({statusType : _type});    this.getPolyline(_type);  }})

WXSS

.tui-map-search{  width: 100%;  height: 80rpx;  position: fixed;  top: 0;  left: 0;  z-index: 1000000;  box-sizing: border-box;  padding: 5rpx 10px;  background-color: #fff;  line-height: 70rpx;}.tui-map-input{  height: 70rpx;  line-height: 70rpx;  font-size: 30rpx;  margin-left: 25px;}.tui-map-search-icon{  position: absolute;  top: calc(50% - 10px);  left: 10px;}.tui-map{  width: 100%;  height: calc(100% - 80rpx);  position: fixed;  bottom: 0;  left: 0;}.tui-map-direction{  width: 32px;  height: 32px;  position: fixed;  right: 10px;  bottom: 80px;  z-index: 100000;}.page-group{  display: table;  width: 100%;  table-layout: fixed;  background-color: #fff;}.page-nav-list{  padding:20rpx 0 ;  font-size: 30rpx;  display: table-cell;  text-align: center;  width: 100%;  color: #222;}.page-nav-list.active{color:blue;}.tui-warn{  height: 50px;  line-height: 50px;  padding-left: 10px;  color: lightseagreen;  font-size: 30rpx;}.tui-search-bottom{  height: 150px;  background: #fff;  width: 100%;  position: fixed;  bottom: 0;  left: 0;  z-index: 1000;}