原点マーカー（GM API DirectionService）を更新した位置にゆっくり移動させるにはどうすればよいですか？

Question

私は2つのオブジェクトの任務とトラックのJSON座標を取得するRoRプロジェクトを持っています。

Google Maps API DirectionServiceを使用して、それらの座標を使用してそれらの間のルートを描画します。

ミッションの座標は、トラックの静的ですがので、私は彼らに10秒ごとに要求しています、AJAXを使用して、ではありません。

Atm、トラックのマーカーが新しい位置に「ジャンプ」して、醜い効果を作り出します。

私が達成したいのは、トラックの座標が更新されるたびに、トラックのマーカーが新しい位置にゆっくりと移動することです。

これを行う方法に関するアイデアは、本当に感謝しています！私の問題を解決するために

$(document).on('page:change', function() { 
    //gets new truck position every 10 seconds 
    var intervalId = setInterval(getNewTruckPosition, 10000); 

    // initial truck coordinates 
    newTruckLatLng = {lat: 41.85, lng: -87.65}; 

    // mission coordinates(directionService destination -> static) 
    missionLatLng = {lat: 40.771, lng: -73.974}; 
    drawMapData(); 

    function getNewTruckPosition() { 
    $.ajax({ 
     .... 
     success: function(data) { 

     //gets new coordinates for truck 
     newTruckLat = "new-value-from-json"; 
     newTruckLong = "new-value-from-json"; 
     newTruckLatLng = {lat: newTruckLat, lng: newTruckLong}; 

     //calculates and draws new route every time truck coordinates are updated 
     drawMapData(); 
     } 
    }); 
    } 
    initMap(); 
}); 
function drawMapData() { 

##########ISSUE I'M TRYING TO SOLVE############# 

    //draws a new marker for the truck, deleting the last one ---> 
    //this results in a truck marker jumping effect 
    //what I would like to achieve is the truck marker 
    //sliding to its new position, not jumping 

    if (typeof newTruckLat != 'undefined') { 
    function makeMarker() { 
     if (typeof newMarker != 'undefined') { 
     newMarker.setMap(null); 
     } 
     newMarker = new google.maps.Marker({ 
     //value received from JSON 
     position: newTruckLatLng, 
     map: map, 
     title: "Truck's Position" 
     }); 
    } 
    } 


    //***********ROUTING****************// 

    directionsService = new google.maps.DirectionsService; 
    directionsDisplay = new google.maps.DirectionsRenderer(); 

    directionsDisplay.setOptions(
    { 
    suppressInfoWindow: true, 
    suppressMarkers: true, 
    polylineOptions: { 
     strokeColor: "#1A239A", 
     strokeOpacity: 0.9 , 
     strokeWeight: 5 
    } 
    }); 

    directionsDisplay.setMap(map); 

    calculateAndDisplayRoute(directionsService, directionsDisplay); 

    function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
    directionsService.route({ 

     //value received from JSON 

     origin: newTruckLatLng, 
     destination: missionLatLng, 
     travelMode: google.maps.TravelMode.DRIVING 
    }, function(response, status) { 
     if (status === google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     makeMarker(); 
     } else { 
     window.alert('Directions request failed due to ' + status); 
     } 
    }); 
    } 
//***********Finished ROUTING****************// 

} 

function initMap() { 

    isDraggable = $(document).width() > 480 ? true : false; 

    if (typeof truckLat != 'undefined') { 
    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 12, 
     draggable: isDraggable, 
     scrollwheel: false, 
     disableDefaultUI: true 
    }); 
    } 

    marker = new google.maps.Marker({ 
    position: missionLatLng, 
    map: map, 
    title: "Mission's Position" 
    }); 

    newMarker = new google.maps.Marker({ 

    //initial value {newTruckLatLng = {lat: 41.85, lng: -87.65}} 
    position: newTruckLatLng, 
    map: map, 
    title: "Truck's Position" 
    }); 

    markers = [marker, newMarker]; 
    bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markers.length; i++) { 
    bounds.extend(markers[i].getPosition()); 
    } 
    map.fitBounds(bounds); 
} 

Answer 1

を管理：

は、ここに私のjsファイルです。

HTML：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="/scripts/v3_epoly.js"></script> 

<div id="map"></div> 

JS：

initialTruckLatLng = {lat: 48.8479, lng: 2.48678}; 
newTruckLatLng = {lat: 48.8479, lng: 2.5914}; 
missionLatLng = {lat: 48.8479, lng: 2.6514}; 


var map; 
var directionDisplay; 
var directionsService; 
var stepDisplay; 
var markerArray = []; 
var position; 
var marker = null; 
var polyline = null; 
var speed = 0.000005, wait = 1; 
var infowindow = null; 

var myPano; 
var panoClient; 
var nextPanoId; 
var timerHandle = null; 

function createMarker(latlng) { 
    var marker = new google.maps.Marker({ 
    position: latlng, 
    map: map 
    }); 
    return marker; 
} 

function initialize() { 
    infowindow = new google.maps.InfoWindow({ 
    size: new google.maps.Size(150,50) 
    }); 
    // Instantiate a directions service. 
    directionsService = new google.maps.DirectionsService(); 

    // Create a map and center it on mission. 
    map = new google.maps.Map(document.getElementById('map'), { 
    center: missionLatLng, 
    zoom: 12, 
    scrollwheel: false, 
    disableDefaultUI: true 
    }); 

    // Create a renderer for directions and bind it to the map. 
    var rendererOptions = { 
    map: map 
    } 
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 

    // Instantiate an info window to hold step text. 
    stepDisplay = new google.maps.InfoWindow(); 

    polyline = new google.maps.Polyline({ 
    path: [], 
    strokeColor: '#FF0000', 
    strokeWeight: 3 
    }); 

    missionMarker = new google.maps.Marker({ 
    position: missionLatLng, 
    map: map, 
    title: 'label' 
    }); 
    marker = createMarker(initialTruckLatLng); 
    markers = [marker, missionMarker]; 
    bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markers.length; i++) { 
    bounds.extend(markers[i].getPosition()); 
    } 
    map.fitBounds(bounds); 
} 

var steps = [] 

function calcRoute(){ 

    if (timerHandle) { clearTimeout(timerHandle); } 
    if (marker) { marker.setMap(null);} 
    polyline.setMap(null); 
    directionsDisplay.setMap(null); 
    polyline = new google.maps.Polyline({ 
    path: [], 
    strokeColor: '#1A239A', 
    strokeOpacity: 0.9 , 
    strokeWeight: 5 
    }); 

    // Create a renderer for directions and bind it to the map. 
    var rendererOptions = { 
    map: map 
    } 

    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 

    var start = initialTruckLatLng; 
    var end = newTruckLatLng; 
    var travelMode = google.maps.DirectionsTravelMode.DRIVING 

    var request = { 
    origin: start, 
    destination: end, 
    travelMode: travelMode 
    }; 

    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK){ 
     directionsDisplay.setDirections(response); 

     var route = response.routes[0]; 
     startLocation = new Object(); 
     endLocation = new Object(); 

     // For each route, display summary information. 
     var path = response.routes[0].overview_path; 
     var legs = response.routes[0].legs; 
     for (i=0;i<legs.length;i++) { 
     if (i == 0) { 
      startLocation.latlng = legs[i].start_location; 
      startLocation.address = legs[i].start_address; 
      // marker = google.maps.Marker({map:map,position: startLocation.latlng}); 
      marker = createMarker(legs[i].start_location); 
     } 
     endLocation.latlng = legs[i].end_location; 
     endLocation.address = legs[i].end_address; 
     var steps = legs[i].steps; 
     for (j=0;j<steps.length;j++) { 
      var nextSegment = steps[j].path; 
      for (k=0;k<nextSegment.length;k++) { 
      polyline.getPath().push(nextSegment[k]); 
      bounds.extend(nextSegment[k]); 
      } 
     } 
     } 

     polyline.setMap(map); 
     startAnimation(); 
    } 
    }); 

    // create a new route between the actual truck position and mission position 
    directionsService = new google.maps.DirectionsService; 
    directionsDisplay = new google.maps.DirectionsRenderer(); 

    directionsDisplay.setOptions(
    { 
    suppressInfoWindow: true, 
    preserveViewport: true, 
    polylineOptions: { 
     strokeColor: "#1A239A", 
     strokeOpacity: 0.9 , 
     strokeWeight: 5 
    } 
    }); 

    directionsDisplay.setMap(map); 

    calculateAndDisplayRoute(directionsService, directionsDisplay); 

    function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
    directionsService.route({ 
     origin: newTruckLatLng, 
     destination: missionLatLng, 
     travelMode: google.maps.TravelMode.DRIVING 
    }, function(response, status) { 
     if (status === google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     } else { 
     window.alert('Directions request failed due to ' + status); 
     } 
    }); 
    }  
} 

var step = 50; // 5; // metres 
var tick = 100; // milliseconds 
var eol; 
var k=0; 
var stepnum=0; 
var speed = ""; 
var lastVertex = 1; 

//=============== animation functions ====================== 

function animate(d) { 
    if (d >= eol) { 
    polyline.setMap(null); 
    } 

    if (d>eol) { 
    marker.setPosition(endLocation.latlng); 
    return; 
    } 
    markers = [marker, missionMarker]; 
    bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markers.length; i++) { 
    bounds.extend(markers[i].getPosition()); 
    } 
    map.fitBounds(bounds); 

    var p = polyline.GetPointAtDistance(d); 
    marker.setPosition(p); 

    timerHandle = setTimeout("animate("+(d+step)+")", tick); 
} 


function startAnimation() { 
    eol=polyline.Distance(); 
    setTimeout("animate(50)",2000); // Allow time for the initial map display 
} 


//=============== ~animation functions =====================