Bing Maps AJAX Control,7.0版具有折线和大量图钉的路径动画

时间:2016-03-23 16:13:49

标签: ajax bing-maps

我在使用折线类使用bing map AJAX 7版本绘制路径时遇到问题,并制作一种图钉(CAR)和大量图钉(drawMarker)

我按照以下链接制作动画

https://blogs.bing.com/maps/2014/09/25/part-2-bring-your-maps-to-life-creating-animations-with-bing-maps-net/

我的问题是当折线与汽车(图钉)和标记(图钉)一起绘制时 在屏幕截图中提及[用标记和汽车绘制折线] [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); } }

所以请给我一个解决方案

0 个答案:

没有答案