1.地图的使用
在wxml文件中使用地图，动态设置中心点位置和地图大小等信息。
<map id="map"
longitude="{{longitude}}"
latitude="{{latitude}}"
scale="14"
controls="{{controls}}"
markers="{{markers}}"
polyline="{{polyline}}"
bindcontroltap="controltap"
bindmarkertap="markertap"
bindregionchange="regionchange"
show-location
style="width: {{map_width}}px; height: {{map_height}}px;"
data-statu="open">
</map>2.地图定位和设置地图大小
可以使用小程序的定位接口实现当前位，在app.js中进行封装获取当前位置的方法，要在<map>中设置show-location属性。
/**
*@param {function} cb 处理地理位置
*/
getLocationInfo: function(cb) {
var that = this;
if (this.globalData.locationInfo) {
cb(this.globalData.locationInfo)
} else {
wx.getLocation({
type: 'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
success: function(res) {
that.globalData.locationInfo = res;
cb(that.globalData.locationInfo)
},
fail: function(res) {
console.log(res);
}
})
}
},调用，onShow每次显示页面时调用一次，动态设置地图大小，获取当前位置信息并且查询当前位置周边设备信息。
data: {
showModalStatus: false, // 弹窗
map_width: 0,
map_height: 0,
longitude: 0, // 经度
latitude: 0, //纬度
markers: [],
polyline: [],
distance: 0, // 距离
cost: 0, // 花费时长
clearShow: false,
searchContent: ''
},
// 每次显示当前页面都要重新请求一次
onShow: function() {
let that = this;
// 获取定位，并把位置标示出来
app.getLocationInfo(function(locationInfo) {
that.setData({
markers: [],
longitude: locationInfo.longitude,
latitude: locationInfo.latitude
});
app.showLoading('正在加载');
let data = {
'gisX': that.data.longitude,
'gisY': that.data.latitude
};
that.loadData(data); // 加载周边设备信息
}),
// 动态设置map的宽和高
wx.getSystemInfo({
success: function(res) {
that.setData({
map_width: res.windowWidth,
map_height: res.windowHeight - 44,
controls: [{
id: 0,
iconPath: '/images/btn.png',
position: {
left: res.windowWidth * 0.5 - 80,
top: res.windowHeight * 0.65,
width: 161,
height: 161
},
clickable: true
}]
})
}
});
},3.点击Marker显示详细信息并创建路线
在wxml中设置弹窗容器
<cover-view class="drawer_box" wx:if="{{showModalStatus}}" bindtap="powerDrawer" data-statu="close">
<!--drawer content-->
<cover-view class="drawer_title">
<cover-image src='../../images/icon-xz.png' />
<cover-view class="distance">{{cost}}分钟. 离目的地{{distance}}米</cover-view>
</cover-view>
</cover-view><map>标签中也要有对应的bindmarkertap="markertap"属性，在js中设置markertap方法
markertap(e) {
let that = this;
let currentStatu = e.currentTarget.dataset.statu; // 当前弹窗open状态
let marker = markersData.filter(function(marker) {
return marker.id === e.markerId;
});// 通过点击的marker的id在markerData中筛选出对应的信息
this.util(currentStatu, marker[0]);
},创建路线要用到高德地图小程序SDK，这里产品只需要计算走路用时，所以设置了走路所用的时间
// 创建路线动画
util: function(currentStatu, marker) {
let that = this;
//关闭弹窗
if (currentStatu == "close") {
that.setData({
showModalStatus: false,
polyline: []
});
}
// 显示弹窗
if (currentStatu == "open") {
let markerLongitude = marker.gisX;
let markerLatitude = marker.gisY;
app.getLocationInfo(function(locationInfo) { // 调用app中的接口获取当前位置信息
// 高德地图key
let amapFun = new amapFile.AMapWX({
key: amapKey
});
amapFun.getWalkingRoute({
origin: locationInfo.longitude + ',' + locationInfo.latitude, // 出发点,lon,lat
destination: markerLongitude + ',' + markerLatitude, // 目的地
success: function(data) {
let points = [];
if (data.paths && data.paths[0] && data.paths[0].steps) {
let steps = data.paths[0].steps;
for (let i = 0; i < steps.length; i++) {
let poLen = steps[i].polyline.split(';');
for (let j = 0; j < poLen.length; j++) {
points.push({
longitude: parseFloat(poLen[j].split(',')[0]),
latitude: parseFloat(poLen[j].split(',')[1])
})
}
}
}
that.setData({
showModalStatus: true,
polyline: [{
points: points,
color: "#5aad80",
width: 5
}]
});
if (data.paths[0] && data.paths[0].distance) {
that.setData({
distance: data.paths[0].distance
});
}
if (data.paths[0] && data.paths[0].duration) {
that.setData({
cost: parseInt(data.paths[0].duration / 60) // 分钟
});
}
},
fail: function(info) {
console.log(info);
}
});
});
}
},4.将地图中心点移到当前位置
由于地图是可以拖动的，当地图中心点偏离当前位置的时候，可以设置按钮，使当前位置为地图中心点，使用mapCtx时要先创建
onReady: function(e) {
// 使用 wx.createMapContext 获取 map 上下文
this.mapCtx = wx.createMapContext('map')
}, // 将地图中心移动到当前位置
moveToLocation: function() {
this.mapCtx.moveToLocation()
},5.滑动地图，动态获取地图中心点位置
这个功能找了很多方法，都没有实现想要的效果，如果使用this.setData({marker})的方式会实现闪屏现象，而且各种bug，所以固定标记地图中心点的方式，只有在wxml中使用<cover-view>标签包裹中心点图标来实现。要在<map>中设置bindregionchange="regionchange"属性
// 地图发生变化的时候，获取中间点，也就是用户选择的位置
regionchange(e) {
// 会有两次，一次start，一次end，一般情况下在移动结束后进行数据请求
if (e.type == 'end') {
app.showLoading('正在搜索');
this.getLngLat();
}
},
// 获取中间点的经纬度，并mark出来
getLngLat: function() {
var that = this;
that.mapCtx = wx.createMapContext("map"); // 如果有初始化mapCtx，这里可以省略
that.mapCtx.getCenterLocation({
success: function(res) {
let curLatitude = res.latitude;
let curLongitude = res.longitude;
// 通过获取的经纬度进行请求数据
let data = {
'gisX': curLongitude,
'gisY': curLatitude
};
that.loadData(data);
}
})
},最后实现的效果图
6.各大小程序地图SDK功能对比
路线规划功能高德小程序地图SDK可以规划步行、公交、驾车路线，还可以计算路线距离和时间
| 小程序地图SDK | 高德地图 | 百度地图 | 腾讯地图 |
| 相同功能 | 获取POI数据 获取地址描述数据（逆地址编码） 获取输入提示词（热词联想） |
POI检索 POI检索热词联想 逆地址解析 |
地点搜索 关键词输入提示 逆地址解析(坐标位置描述) |
| 不同功能 | 获取实时天气数据 路线规划 绘制静态图 |
天气查询 | 地址解析（地址转坐标） 距离计算 路线规划 获取城市列表 获取城市区县 |
腾讯地图小程序SDK使用时，设置要开启webserviceAPI。