मार्ग के साथ एक कस्टम Google मानचित्र मार्कर को एनिमेट कैसे करें?

Question

मैंने जावास्क्रिप्ट और Google मैप्स एपीआई का उपयोग करके हैंडहेल्ड डिवाइस के लिए एक छोटा सा एप्लीकेशन लिखा है, अब मुझे टाइमर फ़ंक्शन का उपयोग करके मार्ग पर मानचित्र पर कहीं भी अपने मार्कर आइकन को स्थानांतरित करने की आवश्यकता है। मेरे पास एक आदमी आइकन है और मुझे इसे मानचित्र पर स्वचालित रूप से स्थानांतरित करने की आवश्यकता है। मैं यह कैसे कर सकता हूँ?

Answer 1

यह स्वचालित रूप से कुछ नहीं लेता है, लेकिन आपको Google Drive फ़ैटफ्यूजन द्वारा प्रयोग करना चाहिए। कोड को देखकर आपकी मदद कर सकती है।

Answer 2

दुर्भाग्य से, आधिकारिक जीएमएपीएस संग्रह में कोई स्वचालित-मार्कर-आंदोलन कार्य नहीं है।

हालांकि, यदि आपके पास GRoute है, तो इसका मतलब होगा कि आपके पास अंक का एक सेट है। मार्ग चरणों के माध्यम से पाश के लिए, आप कुछ इस तरह इस्तेमाल कर सकते हैं:

for (var c = 0; c < yourroute.getNumSteps(); c++) { 
    yourmarker.setLatLng(yourroute.getStep(c).getLatLng()); 
} 

बेशक

, तो आप शायद एसिंक्रोनस रूप टाइमर का उपयोग कर ऐसा करने के लिए चाहता हूँ:

function moveToStep(yourmarker,yourroute,c) { 
    if {yourroute.getNumSteps() > c) { 
     yourmarker.setLatLng(yourroute.getStep(c).getLatLng()); 
     window.setTimeout(function(){ 
      moveToStep(yourmarker,yourroute,c+1); 
     },500); 
    } 
} 

moveToStep(marker,route,0); 

भी चिकनी आंदोलन के लिए, आप आपके पास पहले से मौजूद अंकों से अंतरण कर सकता है।

Answer 3

एक बहुत अच्छा उदाहरण यहाँ है:

http://www.kmcgraphics.com/google/

Answer 4

आशा इस तुम यहाँ मदद मिलेगी एक बटन है और आप स्रोत से गंतव्य मार्ग के लिए मार्कर चाल उन पर क्लिक करें जब। मार्कर के मार्ग को सेट करने के लिए setRoutes विधि का उपयोग किया जाता है।

function setRoutes(){ 

    var directionsDisplay = new Array(); 

    for (var i=0; i< startLoc.length; i++){ 

    var rendererOptions = { 
     map: map, 
     suppressMarkers : true, 
     preserveViewport: true 
    } 
    directionsService = new google.maps.DirectionsService(); 

    var travelMode = google.maps.DirectionsTravelMode.DRIVING; 

    var request = { 
     origin: startLoc[i], 
     destination: endLoc[i], 
     travelMode: travelMode 
    }; 

     directionsService.route(request,makeRouteCallback(i,directionsDisplay[i])); 

    } 

उन्हें सेट करने के बाद मार्ग बनाएं।

function makeRouteCallback(routeNum,disp){ 
     if (polyline[routeNum] && (polyline[routeNum].getMap() != null)) { 
     startAnimation(routeNum); 
     return; 
     } 
     return function(response, status){ 

      if (status == google.maps.DirectionsStatus.OK){ 

      var bounds = new google.maps.LatLngBounds(); 
      var route = response.routes[0]; 
      startLocation[routeNum] = new Object(); 
      endLocation[routeNum] = new Object(); 


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

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


      // For each route, display summary information. 
      var path = response.routes[0].overview_path; 
      var legs = response.routes[0].legs; 


      disp = new google.maps.DirectionsRenderer(rendererOptions);  
      disp.setMap(map); 
      disp.setDirections(response); 


      //Markers    
      for (i=0;i<legs.length;i++) { 
       if (i == 0) { 
       startLocation[routeNum].latlng = legs[i].start_location; 
       startLocation[routeNum].address = legs[i].start_address; 
       // marker = google.maps.Marker({map:map,position: startLocation.latlng}); 
       marker[routeNum] = createMarker(legs[i].start_location,"start",legs[i].start_address,"green"); 
       } 
       endLocation[routeNum].latlng = legs[i].end_location; 
       endLocation[routeNum].address = legs[i].end_address; 
       var steps = legs[i].steps; 

       for (j=0;j<steps.length;j++) { 
       var nextSegment = steps[j].path;     
       var nextSegment = steps[j].path; 

       for (k=0;k<nextSegment.length;k++) { 
        polyline[routeNum].getPath().push(nextSegment[k]); 
        //bounds.extend(nextSegment[k]); 
       } 

       } 
      } 

     }  

     polyline[routeNum].setMap(map); 
     //map.fitBounds(bounds); 
     startAnimation(routeNum); 

    } // else alert("Directions request failed: "+status); 

    } 

} 

अंत में हम GeekOnJava ब्लॉग पर

function startAnimation(index) { 
     if (timerHandle[index]) clearTimeout(timerHandle[index]); 
     eol[index]=polyline[index].Distance(); 
     map.setCenter(polyline[index].getPath().getAt(0)); 

     poly2[index] = new google.maps.Polyline({path: [polyline[index].getPath().getAt(0)], strokeColor:"#FFFF00", strokeWeight:3}); 

     timerHandle[index] = setTimeout("animate("+index+",50)",2000); // Allow time for the initial map display 
} 

आप पाया जा सकता है पूरा कोड शुरू एनीमेशन समारोह और उस कोड को कॉपी करें और उन्हें और आउटपुट youtube पर चलने कहते हैं।

Answer 5

यहां मेरा समाधान है जो v3 API के साथ काम करता है। यह मार्कर को निश्चित वेग के साथ एनिमेट नहीं करता है, लेकिन गणना की गई अवधि अवधि के आधार पर। एक गति कारक है, इसलिए उदाहरण के लिए आप वास्तविकता की तुलना में 10x तेज मार्ग से ड्राइव कर सकते हैं।

मैंने इसे यथासंभव सरल करने की कोशिश की है। इसका इस्तेमाल करने के लिए स्वतंत्र महसूस करें।

var autoDriveSteps = new Array(); 
var speedFactor = 10; // 10x faster animated drive 

function setAnimatedRoute(origin, destination, map) { 
    // init routing services 
    var directionsService = new google.maps.DirectionsService; 
    var directionsRenderer = new google.maps.DirectionsRenderer({ 
     map: map 
    }); 

    //calculate route 
    directionsService.route({ 
      origin: origin, 
      destination: destination, 
      travelMode: google.maps.TravelMode.DRIVING 
     }, 
     function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       // display the route 
       directionsRenderer.setDirections(response); 

       // calculate positions for the animation steps 
       // the result is an array of LatLng, stored in autoDriveSteps 
       autoDriveSteps = new Array(); 
       var remainingSeconds = 0; 
       var leg = response.routes[0].legs[0]; // supporting single route, single legs currently 
       leg.steps.forEach(function(step) { 
        var stepSeconds = step.duration.value; 
        var nextStopSeconds = speedFactor - remainingSeconds; 
        while (nextStopSeconds <= stepSeconds) { 
         var nextStopLatLng = getPointBetween(step.start_location, step.end_location, nextStopSeconds/stepSeconds); 
         autoDriveSteps.push(nextStopLatLng); 
         nextStopSeconds += speedFactor; 
        } 
        remainingSeconds = stepSeconds + speedFactor - nextStopSeconds; 
       }); 
       if (remainingSeconds > 0) { 
        autoDriveSteps.push(leg.end_location); 
       } 
      } else { 
       window.alert('Directions request failed due to ' + status); 
      } 
     }); 
} 

// helper method to calculate a point between A and B at some ratio 
function getPointBetween(a, b, ratio) { 
    return new google.maps.LatLng(a.lat() + (b.lat() - a.lat()) * ratio, a.lng() + (b.lng() - a.lng()) * ratio); 
} 

// start the route simulation 
function startRouteAnimation(marker) { 
    var autoDriveTimer = setInterval(function() { 
      // stop the timer if the route is finished 
      if (autoDriveSteps.length === 0) { 
       clearInterval(autoDriveTimer); 
      } else { 
       // move marker to the next position (always the first in the array) 
       marker.setPosition(autoDriveSteps[0]); 
       // remove the processed position 
       autoDriveSteps.shift(); 
      } 
     }, 
     1000); 
} 

उपयोग:

setAnimatedRoute("source address or LatLng ...", "destination address or LatLng ...", map); 
// start simulation on button click... 
$("#simulateRouteButton").click(function() { 
    startRouteAnimation(agentMarker); 
});