显示移动标记在地图

Question

上我试图做一个标记移动（不会消失，再次出现）地图的道路上的车辆移动上。

我的latLng的两个值，我想，直到下一个点是由车辆发送到移动两者的标记。然后再重复这个过程。

我试过：这不是一个非常有效的方法，我知道]

我的想法是实现上述使用下面点的技术：

1）之间划出一条线他们俩。

2）获取的每个点的位置的经纬度的折线的1/10级分。

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 <= 100; i + 10) { 
      //------- 
      // setTimeout(function() { 
      if (markMarker != null) { 
       markMarker.setMap(null); 
       markMarker = null; 
      } 
      alert('inside the loop'); 
      var intermediatelatlng = mercatorInterpolate(mapObj, oldposition, myLatLng, i/100); 
      alert('Intermediate Latlng is :' + intermediatelatlng); 
      arrayOflatLng.push(intermediatelatlng); 

      var flightPath = new google.maps.Polyline({ 
       path: arrayOflatLng, 
       strokeColor: "#FFFFFF", 
       strokeOpacity: 1.0, 
       strokeWeight: 1 
      }); 
      flightPath.setMap(mapObj); 
      if (i != 100) { 
       markMarker = new google.maps.Marker({ 
        position: intermediatelatlng, 
        icon: image, 
        title: jsonData[0].address, 
        map: mapObj 
       }); 

      } 
      else { 
       markMarker = new google.maps.Marker({ 
        position: intermediatelatlng, 
        icon: oldimage, 
        title: jsonData[0].address, 
        map: mapObj 
       });     
      } 
      mapObj.panTo(intermediatelatlng); 
      //-------- 
      // }, 1000); 
     } 
    } 

} 
function mercatorInterpolate(map, latLngFrom, latLngTo, fraction) { 
    // Get projected points 
    var projection = map.getProjection(); 
    var pointFrom = projection.fromLatLngToPoint(latLngFrom); 
    var pointTo = projection.fromLatLngToPoint(latLngTo); 
    // Adjust for lines that cross the 180 meridian 
    if (Math.abs(pointTo.x - pointFrom.x) > 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）如果我alow运行为5分钟以上此代码的浏览器，浏览器崩溃。

注意：使用setInterval每10秒调用Above函数。

什么可以是更好的解决方案？请帮助..

Answer 1

的代码对于标记以相对平稳地移动时，需要

• 更新多于折线的每1/10部分（至少每几个像素）
• 调用Update方法更频繁地
• 不要删除并重新添加标记

对于考试PLE，是这样的：

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）

Answer 2

为什么不保留现有的Marker/MarkerImage并调用setPosition（）来移动它，无论是在计时器还是位置改变？

删除它&重新创建它是导致它闪烁/闪烁并最终崩溃的原因。如果你保持相同的实例但只是移动它，你应该做得更好。

见：Marker.setPosition（）

https://developers.google.com/maps/documentation/javascript/reference#Marker

Answer 3

这个链接.. 尝试首先在你有2处添加两个标记。 然后可以创建2个点之间的动画与所述Link

Answer 4

使动画使用JavaScript在谷歌地图上移动的标记，可以看到他们对Youtube.com

Answer 5

您可以使用marker-animate-unobtrusive库使标记 从一个位置平滑过渡到另一个位置（而不是重新出现）。

你可以初始化标记像：

var marker = new SlidingMarker({ 
    //your original marker options 
}); 

只需拨打marker.setPosition（）每一次新车型的坐标到达。

P.S.我是图书馆的作者。