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

Question

我必须在谷歌地图中显示车辆运动，所以点击我的团队我让阿贾克斯称它获取经纬度和所有车辆的一些信息，然后我在地图上放置一个标记。在这里，如果车辆为下一个ajax呼叫而移动，那么当时我会得到差异lng，我会向标记显示过渡效果。这是给我的问题，

这里是阿贾克斯的我的回调函数，

function callBackFunction(http_request) { 
    if (http_request.readyState == 4) { 
    if (http_request.status == 200) { 


     var rs = http_request.responseText; 
     //here rs is as follow in servlet fstring=fstring+lat+","+lng+"$"+vn+"@notsame@"+busImg+"@"+drvcdr+"#"; 
     var SlNo=0; 
     var position=""; 
     var busImg=""; 
     clear_Icon(); 
     while(rs.length) 
     { 
      lat=rs.substring(0,rs.indexOf(",")); 
      lng=rs.substring(rs.indexOf(",")+1,rs.indexOf("$")); 
      vn=rs.substring(rs.indexOf("$")+1,rs.indexOf("@")); 
      rs=rs.substring(rs.indexOf("@")+1); 
      position=rs.substring(0,rs.indexOf("@")); 
      rs=rs.substring(rs.indexOf("@")+1); 

      busImg=rs.substring(0,rs.indexOf("@")); 
      rs=rs.substring(rs.indexOf("@")+1); 
      drvcdr=rs.substring(0,rs.indexOf("#")); 
      add_icon(lat,lng,SlNo,vn,position,busImg,drvcdr); 

      rs=rs.substring(rs.indexOf("#")+1); 
      SlNo++; 
     } 

    } else { 
     alert('ERR OR: AJAX request status = ' + http_request.status); 
    } 
} 
} 

放置标记和过渡效果，

function add_icon(lt, ln,n,vn,position,busImg,drvcdr) { 

     var point = new google.maps.LatLng(lt, ln); 
     //alert("Icon: "+busImg); 

     marker= createMarker(point,n,vn,position,busImg,drvcdr); 
     alert("After Marker placed:"+point.lat()+" "+point.lng()); 
     transitionnn(point); 
     } 

    var gmarkers = []; 

    function createMarker(point, number,vn,position,busImg,drvcdr) { 

      var angleDegrees = 150; 
       var marker = new google.maps.Marker({ 
        position: point, 
        map: map, 
        raiseOnDrag: true, 
        icon:busImg, 

       // animation: google.maps.Animation.DROP, 
        draggable: false, 
        zIndex: number, 
        id:vn, 
        drvcddr:drvcdr 


       });    

     var html = number; 

     var infowindow = new google.maps.InfoWindow({ 
      content: 'Latitude: ' + point.lat() + 
      '<br>Longitude: ' + point.lng() + '<br>BusNo : '+ marker.get("id")+ '<br>DrivrConductor : '+ marker.get("drvcddr"), 
      maxwidth: 1000 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
     //map.setZoom(15); 
     map.setCenter(marker.getPosition()); 
      infowindow.open(map,marker); 
      }); 

     gmarkers.push(marker); 
     return marker; 
    }; 

    function transitionnn(point) 
    { 
     var result = [point.lat(), point.lng()]; 
     transition(result); 
    } 

    var numDeltas = 100; 
    var delay = 100; //milliseconds 
    var i = 0; 
    var deltaLat; 
    var deltaLng; 


    function transition(result){ 

     i = 0; 
     deltaLat = (result[0] - position[0])/numDeltas; 
     deltaLng = (result[1] - position[1])/numDeltas; 
     moveMarker(); 
    } 

    function moveMarker(){ 
     position[0] += deltaLat; 
     position[1] += deltaLng; 
     var latlng = new google.maps.LatLng(position[0], position[1]); 
     marker.setPosition(latlng); 
     if(i!=numDeltas){ 
      i++; 
      setTimeout(moveMarker, delay); 
     } 
    } 

的问题是，在地图中我得到的标记，但不确切的位置和过渡效果也没有正确显示。我不知道我哪里有问题，谁能帮我解决这个问题。谢谢。

Answer 1

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

我做了什么：4辆汽车从布鲁塞尔开始;每次你点击按钮，你会得到下一个点。每个标记都会转换到新的位置。数据应该来自某个数据库（或如此）;我只使用3套位置（针对每辆车）

注意：您不使用jQuery。所以我做了（种）的$就最小版本与原始的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>