我在使用折线类使用bing map AJAX 7版本绘制路径时遇到问题,并制作一种图钉(CAR)和大量图钉(drawMarker)
我按照以下链接制作动画
我的问题是当折线与汽车(图钉)和标记(图钉)一起绘制时 在屏幕截图中提及[用标记和汽车绘制折线] [1] 一段时间后,只绘制折线 如屏幕截图Car pin get disapper所示 ,但是当我与地图相互作用时,如放大缩小,它会再次出现[放大后放大后车针重新出现] [3]
经过如此多的点击和追踪后,我通过在缩放级别使用setInterval找到了一种方法,在10秒后将缩放比例改为16级,反之亦然,它会正常工作,但用户体验不会突然放大缩小。
var pushpinOptions = (center,{
icon: "/images/carMarker.png",
width: 60,
height: 60,
anchor: new Microsoft.Maps.Point(30, 40),
typeName: 'carMarker'
});
map.entities.remove(carPin);
carPin = new Microsoft.Maps.Pushpin(location, pushpinOptions);
map.entities.push(carPin);
currentAnimation = new Bing.Maps.Animations.PathAnimation(path, function (coord, idx, frameIdx) {
frameIDX=frameIdx;
map.getZoomRange = function () {
return {
max: 17,
min: 5
};
};
if (frameIdx < frameCount) {
if (frameIdx == 1) {
replayLine = new Microsoft.Maps.Polyline([path[0], coord], {strokeColor: new Microsoft.Maps.Color(255, 67, 142, 185)});
linesLayer.push(replayLine);
map.entities.push(linesLayer);
clearTime= setInterval(function(){
zoom=map.getZoom();
console.log("---------getZoom data "+ map.getZoom())
if(zoom==16) {
zoom = 15;
}else{
zoom=16;
}
},10000);
}
else if (frameIdx > 1) {
map.setView({center: coord,zoom:zoom});
carPin.setLocation(coord);
if (cIDX != idx) {
cIDX = idx;
console.log("value of cIDX="+cIDX);
var location = new Microsoft.Maps.Location(replayData[index].latitude, replayData[index].longitude);
if (index == 0) {
drawStartMarker(location, replayData[index])
} else if (index == replayData.length - 1) {
drawEndMarker(location, replayData[replayData.length - 1])
} else {
drawMarker(location, replayData[index]);
}
}
$(".carMarker").find('img').css('transform', 'rotate(' + replayData[index].heading + 'deg)');
points = replayLine.getLocations();
points.push(coord);
replayLine.setLocations(points);
}
}
所以请给我一个解决方案