微信小程序—-高德地图开发应用(获取key)
1.利用高德开发平台创建应用
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>
</view>
<view 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>
</view>
<view 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>
JS
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;
}
注意
在实例化 AMapWX 对象前,必须引入amap-wx.js,amap-wx.js下载
网址:http://lbs.amap.com/api/wx/download