最近在做小程序的时候有一个类似共享单车显示附近单车的需求。查了查微信api发现api里多点定位描述的不清晰，试了试也不可以。静下心踩了几个坑后写了几个方法。分享一下??
附上代码
html结构：
<map id="map" scale="{{scale}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" latitude="{{latitude}}"longitude ="{{longitude}}"controls="{{controls}}" show-location bindregionchange="regionchange" style="width: 100%; height: {{view.Height}}px;"></map>
javascript：
var app = getApp();
Page({
data: {
url:‘‘,
listData: [
{
"id": 1,
"placeName": "中关村广场",
"placeImageUrl": "",
"placeOpenTime": 1505854800,
"placeCloseTime": 1505919600,
"placeAddress": "北京市海淀区中关广场",
"placeLongitude": "116.303900",
"placeLatitude": "39.976460"
}, {
"id": 2,
"placeName": "虎丘的广场",
"placeImageUrl": "",
"placeOpenTime": 1506286800,
"placeCloseTime": 1506258000,
"placeAddress": "江苏省苏州虎丘",
"placeLongitude": "120.410770",
"placeLatitude": "31.325370"
}, ],
scale:‘15‘, //缩放
Height:‘0‘,
controls:‘40‘,//中心点
latitude:‘‘,
longitude:‘‘,
markers: [],
},
onReady: function (e) {
// 使用 wx.createMapContext 获取 map 上下文
this.mapCtx = wx.createMapContext(‘myMap‘)
},
onLoad: function () {
var that = this;
that.setData({
url: app.globalData.url// 显示图片url
})
wx.getLocation({
type: ‘wgs84‘, //返回可以用于wx.openLocation的经纬度
success: (res) => {
that.setData({
markers: that.getSchoolMarkers(),
scale: 12,
longitude: res.longitude,
latitude: res.latitude
})
}
});
wx.getSystemInfo({
success: function (res) {
//设置map高度，根据当前设备宽高满屏显示
that.setData({
view: {
Height: res.windowHeight
},
})
}
})
},
controltap(e) {
this.moveToLocation()
},
getSchoolMarkers() {
var market = [];
for (let item of this.data.listData) {
let marker1 = this.createMarker(item);
market.push(marker1)
}
return market;
},
moveToLocation: function () {
this.mapCtx.moveToLocation()
},
strSub:function(a){
var str = a.split(".")[1];
str = str.substring(0, str.length - 1)
return a.split(".")[0] + ‘.‘ + str;
},
createMarker(point) {
let latitude = this.strSub(point.placeLatitude);
let longitude = point.placeLongitude;
let marker = {
iconPath: "../../image/banner5.jpeg",
id: point.id || 0,
name: point.placeName || ‘‘,
title: point.placeName || ‘‘,
latitude: latitude,
longitude: longitude,
label:{
x:-24,
y:-26,
content: point.placeName
},
width: 30,
height: 30
};
return marker;
}
})
