在地图上显示移动标记
当车辆在路上行驶时，我试图在地图上移动标记（ 不会消失并再次出现 ）。
我有两个latLng值，我想在两者之间移动标记，直到车辆发送下一个点。 然后再次重复该过程。
我尝试了什么：[这不是一种非常有效的方式，我知道]
我的想法是使用下面的技术实现上述方法：
1）在两者之间划一条线。
2）在折线的1/10分数上获取每个点的latLng。
3）在地图上标记10个点以及折线。
这是我的代码：
var isOpen = false; var deviceID; var accountID; var displayNameOfVehicle; var maps = {}; var lt_markers = {}; var lt_polyLine = {}; function drawMap(jsonData, mapObj, device, deleteMarker) { var oldposition = null; var oldimage = null; var arrayOflatLng = []; var lat = jsonData[0].latitude; var lng = jsonData[0].longitude; //alert(jsonData[0].imagePath); var myLatLng = new google.maps.LatLng(lat, lng); if (deleteMarker == true) { if (lt_markers["marker" + device] != null) { oldimage = lt_markers["marker" + device].getIcon().url; oldposition = lt_markers["marker" + device].getPosition(); lt_markers["marker" + device].setMap(null); lt_markers["marker" + device] = null; } else { console.log('marker is null'); oldimage = new google.maps.MarkerImage(jsonData[0].imagePath, null, null, new google.maps.Point(5, 17), //(15,27), new google.maps.Size(30, 30)); oldposition = myLatLng; } } var image = new google.maps.MarkerImage(jsonData[0].imagePath, null, null, new google.maps.Point(5, 17), //(15,27), new google.maps.Size(30, 30)); lt_markers["marker" + device] = new google.maps.Marker({ position: myLatLng, icon: image, title: jsonData[0].address }); if (oldposition == myLatLng) { alert('it is same'); lt_markers["marker" + device].setMap(mapObj); mapObj.panTo(myLatLng); } else { alert('it is not same'); var markMarker = null; var i = 10; for (i = 10; i 128) { if (pointTo.x > pointFrom.x) pointTo.x -= 256; else pointTo.x += 256; } // Calculate point between var x = pointFrom.x + (pointTo.x - pointFrom.x) * fraction; var y = pointFrom.y + (pointTo.y - pointFrom.y) * fraction; var pointBetween = new google.maps.Point(x, y); // Project back to lat/lng var latLngBetween = projection.fromPointToLatLng(pointBetween); return latLngBetween; } 面临的问题：
1）标记没有显示在地图上，因为绘图和删除标记的过程非常快，以至于标记在屏幕上不可见。 我尝试过setTimeOut，它根本没用。
2）如果我让浏览器运行此代码超过5分钟，浏览器崩溃。
注意：使用setInterval每10秒调用Above函数。
什么是更好的解决方案？ 请帮忙..
要使标记移动相对平稳，您需要
- 更新多于折线的1/10分数（至少每几个像素）
- 更频繁地调用更新方法
- 不要删除并重新添加标记
例如，类似于：
var counter = 0; interval = window.setInterval(function() { counter++; // just pretend you were doing a real calculation of // new position along the complex path var pos = new google.maps.LatLng(35, -110 + counter / 100); marker.setPosition(pos); if (counter >= 1000) { window.clearInterval(interval); } }, 10);
我在http://jsfiddle.net/bmSbU/2/做了一个简单的例子，它显示了一条沿直线路径移动的标记。 如果这是您想要的，那么您上面的大部分代码都可以重复使用（或查看http://broady.github.io/maps-examples/points-along-line/along-directions。 HTML ）
您可以使用marker-animate-unobtrusive库使标记从一个位置平滑过渡到另一个位置（而不是重新出现）。
您可以像这样初始化您的标记：
var marker = new SlidingMarker({ //your original marker options });
每次新车辆的坐标到达时，只需调用marker.setPosition（）。
PS我是图书馆的作者。
为什么不保留现有的Marker / MarkerImage并调用setPosition（）来移动它，无论是在计时器上还是在位置发生变化时？
删除它并重新创建它是导致它闪烁/闪烁并最终崩溃的原因。 如果你保持相同的实例但只是移动它，你应该做得更好。
请参阅：Marker.setPosition（）
https://developers.google.com/maps/documentation/javascript/reference#Marker
使用javascript在Google地图上制作动画移动标记，可在Youtube.com上查看
尝试使用此链接..首先在您拥有的2个位置添加两个标记。 然后，您可以使用链接中的代码在2个点之间创建动画