顯示移動標記在地圖

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.我是圖書館的作者。