如何放置一组具有过渡效果的标记

我认为这基本上是你想要的效果。

我所做的:4辆车从布鲁塞尔出发;每次你点击按钮，你会得到下一个点。每个标记都转换到新的位置。

数据应该来自某个DB(或左右);我只使用3组位置(每辆车)

注意:你不使用jQuery。所以我做了一个最小版本的$。Ajax与原始javascript

ajax_json.php

<?php
$locations = json_decode(
  '[
    [{"lat": 50.8454638, "lng": 4.33719938}, {"lat": 50.8555429, "lng": 4.35711210}, {"lat": 50.8454638, "lng": 4.369300}, {"lat": 50.8331057, "lng": 4.35711210}],
    [{"lat": 51.0540382, "lng": 3.72185772}, {"lat": 51.2199126, "lng": 4.40142220}, {"lat": 50.96458043, "lng": 5.493295848}, {"lat": 50.45450295, "lng": 3.95242041}],
    [{"lat": 51.20249156, "lng": 3.22428649}, {"lat": 51.92036145, "lng": 4.4799894}, {"lat": 50.936165, "lng": 6.96152633}, {"lat": 49.258189, "lng": 4.03229659}]
]');
$t = isset($_GET['t']) ? (int) $_GET['t'] : 0;
echo json_encode(array('locations'=> $locations[$t], 'get'=> print_r($_GET, 1) ));
?>

index . php

<style>
  #map_canvas {
    width: 700px;
    height: 500px;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script>
  // a few globals
  var t = 0;
  var markers = [];  // let's keep this global, so we can easily access it everywhere
  var map;
  // settings (100 steps, each step is 20ms apart)
  var interval = 20;
  var steps = 100;
  // this function makes an Ajax call, to get the locations of the car.
  function getNextLocations() {
    ajax({
      success: receiveNextLocations,
      url: 'ajax_json.php?t=' + t,
      dataType: 'json'
    });
    t++;
  }
  // callback for the ajax call.  Gets triggerd when the next locations are received from the server
  function receiveNextLocations(data) {
    for (var i=0; i<data.locations.length; i++) {
      if (markers[i]) {
        // update marker position, we use transition
        markerTransition(markers[i], markers[i].getPosition(), new google.maps.LatLng(data.locations[i].lat, data.locations[i].lng), 0);
      }
      else {
        // new marker
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(data.locations[i].lat, data.locations[i].lng),
          map: map
        });
        // we store the markers in an array
        markers.push(marker);
      }
    }
  }
  // recursive function.  Takes a marker and moves it to a destination, in many steps
  function markerTransition(marker, oldPosition, newPosition, i) {
    // 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);
        },
        interval
      );
    }
  }
  // initialize Google Maps
  function initialize() {
    var mapCanvas = document.getElementById('map_canvas');
    var mapOptions = {
      center: new google.maps.LatLng(50.8, 4.7),
      zoom: 6,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(mapCanvas, mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
  // ajax function that looks a bit like jQuery $.ajax
  // minimal code for what I need; not dummy proof, no error handling ...
  // feel free to extend this
  var http_request = new XMLHttpRequest();
  function ajax(options) {
    http_request.open(options.type || 'GET', options.url, true);
    http_request.send(options.data || null);
    http_request.onreadystatechange = function() {
      if (http_request.readyState == 4) {
        if (http_request.status == 200) {
          var type = options.dataType || '';
          switch (type.toLowerCase()) {
            default: 
              options.success(http_request.responseText);
              break;
            case 'json': 
              options.success(JSON.parse(http_request.responseText));
              break;
          }
        }
      }
    }
  }
</script>
<p id="map_canvas" ></p>
<input type="button" value="Next locations" onclick="getNextLocations()"><br><br>
<div id="messages"></div>