1. Development environment mpvue
+ WeChat Mini Programs
. There is a flicker problem when the track in
2. markers
is drawn by timer
.
3. Specific code
<map id="map" :longitude="longitude" :latitude="latitude" :scale="localScale" :polyline="polyline" :markers="localMarker" style="width: 100%; height: 88%;">
let show= () => {
this.playTrajectory=setTimeout(() => {
// console.log(this.polyline[0].points[this.markerIndex].longitude,this.polyline[0].points[this.markerIndex].latitude)
// this.movePoints(this.polyline[0].points[this.markerIndex].longitude,this.polyline[0].points[this.markerIndex].latitude)
this.localMarker[1].latitude= this.polyline[0].points[this.markerIndex].latitude
this.localMarker[1].longitude= this.polyline[0].points[this.markerIndex].longitude
this.markerIndexPP;
if(this.markerIndex<this.polyline[0].points.length){
show()
}else{
this.changeIcon=playIcon;
this.markerIndex=0;
this.isPlayNow=false;
}
},200)
}
if(this.isPlayNow){
clearTimeout(this.playTrajectory);
}else{
show();
}
4. Try to move the coordinate point to the next destination via the official API mapCtx.translateMarker
(the code comments section above). But there are no eggs, not even moving, always flickering in place.
specific code:
movePoints(lon,lat) {
let mapCtx = wx.createMapContext("map");
mapCtx.translateMarker({
markerId:0,
destination:{longitude:lon,latitude:lat},
autoRotate:true,
rotate:0
})
},