目录
效果图:
一、布局文件
<map class="mapUI" id="myMap" markers="{{markers}}" latitude="{{latitude}}" longitude="{{longitude}}" polyline="{{polyline}}" include-points='{{points}}' scale="16"></map>
二、js文件
export { }
const appData = getApp();
var pointinfor = []
var thatInfor
Page({
data: {
gps: ["108.939087,34.250638", "108.939087,34.240917", "108.932135,34.241095", "108.932006,34.235702", "108.932049,34.230291", "108.931985,34.228233", "108.931942,34.222778", "108.931942,34.218058", "108.939151,34.218236", "108.939055,34.214536", "108.943153,34.214536", "108.946587,34.214478"],
searchData: [],
lineData: [],
polyline: [],
markers: [],
points: [],
orgId: "",
token: "",
codeModel: {},
choicePersonInfor: {},
companyData: [],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.mapCtx = wx.createMapContext('myMap')
this.mapCtx.moveToLocation()
var pointinfor = [];
for (var index = 0; index < this.data.gps.length; index++) {
pointinfor.push({
latitude: this.data.gps[index].split(",")[1],
longitude: this.data.gps[index].split(",")[0],
})
}
let mapAddress = [];
mapAddress.push({
latitude: this.data.gps[0].split(",")[1],
longitude: this.data.gps[0].split(",")[0],
id: 20,
iconPath: '../image/mocar.png',
width: '40px',
height: '60px',
anchor: {
x: 0.5,
y: 0.4
}
});
mapAddress.push({
id: 1001,
latitude: this.data.gps[0].split(",")[1],
longitude: this.data.gps[0].split(",")[0],
name: "起点",
iconPath: '../image/icon_start.png',
content: "111",
width: '30px',
height: '45px',
});
mapAddress.push({
id: 9001,
latitude: this.data.gps[this.data.gps.length - 1].split(",")[1],
longitude: this.data.gps[this.data.gps.length - 1].split(",")[0],
name: "终点",
iconPath: '../image/icon_end.png',
content: "111",
width: '30px',
height: '45px',
});
mapAddress.push({
id: 1011,
latitude: this.data.gps[3].split(",")[1],
longitude: this.data.gps[3].split(",")[0],
name: "幸福小区接送点",
iconPath: '/pages/image/markerimage.png',
width: '34px',
height: '34px',
content: "111",
callout: {
content: "幸福小区接送点",
padding: 5,
fontSize: 12,
textAlign: 'center',
display: 'ALWAYS',
borderRadius: 5,
borderWidth: 1,
bgColor: '#ffffff',
borderColor: "#c3c3c3"
},
});
mapAddress.push({
id: 1012,
latitude: this.data.gps[6].split(",")[1],
longitude: this.data.gps[6].split(",")[0],
name: "幸福小区接送点",
iconPath: '/pages/image/markerimage.png',
width: '34px',
height: '34px',
content: "111",
callout: {
content: "雁塔小区接送点",
padding: 5,
fontSize: 12,
textAlign: 'center',
display: 'ALWAYS',
borderRadius: 5,
borderWidth: 1,
bgColor: '#ffffff',
borderColor: "#c3c3c3"
},
});
this.setData({
markers: mapAddress,
polyline: [{
points: pointinfor,
color: '#09B988',
width: 5,
dottedLine: false,
arrowLine: true,
borderColor: "#09B988",
borderWidth: 1,
}],
})
var mapCtx = wx.createMapContext("myMap");
mapCtx.includePoints({
points: pointinfor,
padding: [50]
})
mapCtx.moveAlong({
markerId: 20,
autoRotate: true,
path: pointinfor,
duration: 50000,
})
},
})
三、代码说明
1:首先需要给绘制的线路设置坐标数据信息
2:对起点和终点设置两个marker
3:设置小车轨迹的移动
mapCtx.moveAlong({
markerId: 20,
autoRotate: true,
path: pointinfor,
duration: 50000,
})
4:设置线路与地图边距的距离代码
mapCtx.includePoints({
points: pointinfor,
padding: [50]
})