如何在谷歌地图（javascript）上使标记运动流畅？

Question

我制作了一个简单的map.js文件。我必须循环遍历所有位置并相应地绘制标记，擦除前一个并显示平滑的标记移动。

这是我尝试过的。到目前为止，它只是将标记放在最终位置广告我也知道为什么（因为setTimeout()）但我不知道如何解决它。

任何帮助都将不胜感激。

这只是整个代码的一部分。

var lat;
var lng;
var oldLat;
var oldLng;
var marker;
var map;
var numDeltas = 100;
var delay = 10; //milliseconds
var j = 0;
var deltaLat;
var deltaLng;

oldLat = data.data[0].lat;
oldLng = data.data[0].long;

marker = new google.maps.Marker({
  position: new google.maps.LatLng(oldLat, oldLng),
  map: map,
}); 

for(var i=1; i<72; i++)
{
    lat = data.data[i].lat;  //have the data
    lng = data.data[i].long;  //have the data
    transition(lat, lng);
    oldLat = lat;
    oldLng = lng;
}

function transition(lat, lng)
{
    j = 0;
    deltaLat = (Number(lat) - Number(oldLat))/numDeltas;
    deltaLng = (Number(lng) - Number(oldLng))/numDeltas;
    var latlng = new google.maps.LatLng(oldLat, oldLng);
    moveMarker(latlng);
}

function moveMarker(latlng)
{
    marker.setPosition(latlng);
    oldLat = Number(oldLat) + deltaLat;
    oldLng = Number(oldLng) + deltaLng;
    var latlng = new google.maps.LatLng(oldLat, oldLng);
    if(j!=numDeltas)
    {
        j++;
        setTimeout(moveMarker(latlng), delay);
    }
}

Answer 1

<style>
  #map_canvas {
    width: 700px;
    height: 500px;
  }
</style>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
  var marker;  // let's keep this global, so we can easily access it everywhere
  var map;

  // initialize Google Maps
  function initialize() {
    var mapCanvas = document.getElementById('map_canvas');
    var mapOptions = {
      center: new google.maps.LatLng(50.8, 4.7),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(mapCanvas, mapOptions);
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(50.8, 4.7),
      map: map
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);

  // takes a marker and smoothly moves it to a new position
  function markerTransition(marker, oldPosition, newPosition, i) {
    // settings, feel free to change these
    var steps = 72;
    var timerInterval = 50;  // every step takes 50ms
    // we calculate the temporary position
    var tempPosition = new google.maps.LatLng(
      oldPosition.lat() + i * (newPosition.lat() - oldPosition.lat()) / steps,
      oldPosition.lng() + i * (newPosition.lng() - oldPosition.lng()) / steps    
    );
    marker.setPosition(tempPosition);
    if(i<steps) {
      setTimeout(function() {
          markerTransition(marker, oldPosition, newPosition, i+1);
        },
        timerInterval
      );
    }
  }
</script>
<div id="section"></div>
<p id="map_canvas" ></p>
<hr>
Zoom out so you can see start and end<br>
From Paris to Brussels.
<input value="GO" type="button" onclick="markerTransition(marker, new google.maps.LatLng(48.85818520410521,2.294554978609), new google.maps.LatLng(50.89512908591323,4.341423779726), 0);"> 
<br>
First we'll take Manhattan, then we take Berlin
<input value="GO" type="button" onclick="markerTransition(marker, new google.maps.LatLng(40.76784982139687,-73.97199574112894), new google.maps.LatLng(52.52207312527306,13.41274318099), 0);"> 

Answer 2

您可以考虑以下方法：

• 为每个位置生成标记收集
• 使用marker.setVisibility(value)
显示标记

示例

＆＃13;

＆＃13;

var markers = [];
function initialize() {
    
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 6,
        center: new google.maps.LatLng(59.526964, 23.617352),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var startPos = new google.maps.LatLng(60.174039, 24.940939);
    var endPos = new google.maps.LatLng(59.337174, 18.067883);
   

    // generate fake points for route
    var pointsNo = 80;
    var latDelta = (endPos.lat() - startPos.lat()) / pointsNo;
    var lngDelta = (endPos.lng() - startPos.lng()) / pointsNo;
    var positions = [];
    for (var i = 0; i < pointsNo; i++) {
        var curLat = startPos.lat() + i * latDelta;
        var curLng = startPos.lng() + i * lngDelta;
        positions.push(new google.maps.LatLng(curLat, curLng));


        var curMarker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(curLat, curLng),
            visible: false
        });
        markers.push(curMarker);
    }
}




function displayMarker(markers, index, delay) {    
    if (index > 0)
        markers[index - 1].setVisible(false);
    else {
        markers[markers.length - 1].setVisible(false);
    }

    markers[index].setVisible(true);
    if (index < markers.length - 1) {
        setTimeout(function () {
            displayMarker(markers, index + 1, delay);
        }, delay);
    } else {
        displayMarker(markers, 0, delay);
    }
}


google.maps.event.addDomListener(window, 'load', function() {
    initialize();
});


function move() {
    var delay = 40;
    displayMarker(markers, 0, delay);
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true" type="text/javascript"></script>
<input type="button" value="Move" onclick="move();"/>
<div id="map" style="width: 480px; height: 320px;"></div>

＆＃13;

＆＃13;

＆＃13;