प्लॉट एक नक्शे के पथ/गूगल मैप्स एपीआई का उपयोग करने और खेलने मार्ग

Question

मैं के रूप में एक मैप किए गए मार्ग के माध्यम से खेला जाता है पथ का दौरा किया प्लॉट करने के लिए कोशिश कर रहा हूँ, निम्न उदाहरण में वेपोइंट:

जब एक नक्शा लोड मैं एक दूसरे के बाद एक को जोड़ने के लिए प्लॉट किए गए अंक ए, बी, सी, डी, ई, और फिर एफ चाहते हैं।

मैंने सफलतापूर्वक अंक प्लॉट किए हैं, लेकिन मैं गतिशील रूप से दूसरे के बाद बिंदुओं को लिंक नहीं कर सकता।

कैसे मैं वापस अंक दिखा नाटक कर सकते हैं साथ इस मार्ग मैप किया गया:

<script type="text/javascript"> 
var markers = [{ 
    "title": 'Alibaug', 
    "lat": '12.97721863', 
    "lng": '80.22206879', 
    "description": 'Alibaug is a coastal town and a municipal council in Raigad District in the Konkan region of Maharashtra, India.' 
}, { 
    "title": 'Mumbai', 
    "lat": '12.9962529', 
    "lng": '80.2570098', 
    "description": 'Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.' 
}, { 
    "title": 'Pune', 
    "lat": '12.97722816', 
    "lng": '80.22219086', 
    "description": 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.' 
}]; 
window.onload = function() { 
    var mapOptions = { 
     center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP,}; 
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 

    //*********** GOOGLE MAP SEARCH ****************// 
    // Create the search box and link it to the UI element. 
    var input = /** @type {HTMLInputElement} */ (
     document.getElementById('pac-input')); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

    var searchBox = new google.maps.places.SearchBox(
     /** @type {HTMLInputElement} */ 
     (input)); 
    // Listen for the event fired when the user selects an item from the 
    // pick list. Retrieve the matching places for that item. 
    google.maps.event.addListener(searchBox, 'places_changed', function() { 
     var places = searchBox.getPlaces(); 

     for (var i = 0, marker; marker = markers[i]; i++) { 
      // marker.setMap(null); 
     } 

     // For each place, get the icon, place name, and location. 
     markers = []; 
     var bounds = new google.maps.LatLngBounds(); 
     var place = null; 
     var viewport = null; 
     for (var i = 0; place = places[i]; i++) { 
      var image = { 
       url: place.icon, 
       size: new google.maps.Size(71, 71), 
       origin: new google.maps.Point(0, 0), 
       anchor: new google.maps.Point(17, 34), 
       scaledSize: new google.maps.Size(25, 25) 
      }; 

      // Create a marker for each place. 
      var marker = new google.maps.Marker({ 
       map: map, 
       icon: image, 
       title: place.name, 
       position: place.geometry.location 
      }); 
      viewport = place.geometry.viewport; 
      markers.push(marker); 

      bounds.extend(place.geometry.location); 
     } 
     map.setCenter(bounds.getCenter()); 
    }); 
    // Bias the SearchBox results towards places that are within the bounds of the 
    // current map's viewport. 
    google.maps.event.addListener(map, 'bounds_changed', function() { 
     var bounds = map.getBounds(); 
     searchBox.setBounds(bounds); 
    }); 
    //***********Google Map Search Ends****************// 


    var infoWindow = new google.maps.InfoWindow(); 
    var lat_lng = new Array(); 
    var latlngbounds = new google.maps.LatLngBounds(); 
    for (i = 0; i < markers.length; i++) { 
     var data = markers[i] 
     var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
     lat_lng.push(myLatlng); 
     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title: data.title 
     }); 
     latlngbounds.extend(marker.position); 
     (function(marker, data) { 
      google.maps.event.addListener(marker, "click", function(e) { 
       infoWindow.setContent(data.description); 
       infoWindow.open(map, marker); 
      }); 
     })(marker, data); 
    } 
    map.setCenter(latlngbounds.getCenter()); 
    map.fitBounds(latlngbounds); 

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

    //Initialize the Path Array 
    var path = new google.maps.MVCArray(); 

    //Initialize the Direction Service 
    var service = new google.maps.DirectionsService(); 

    //Set the Path Stroke Color 
    var poly = new google.maps.Polyline({ 
     map: map, 
     strokeColor: '#4986E7' 
    }); 

    //Loop and Draw Path Route between the Points on MAP 
    for (var i = 0; i < lat_lng.length; i++) { 
     if ((i + 1) < lat_lng.length) { 
      var src = lat_lng[i]; 
      var des = lat_lng[i + 1]; 
      path.push(src); 
      poly.setPath(path); 
      service.route({ 
       origin: src, 
       destination: des, 
       travelMode: google.maps.DirectionsTravelMode.DRIVING 
      }, function(result, status) { 
       if (status == google.maps.DirectionsStatus.OK) { 
        for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { 
         path.push(result.routes[0].overview_path[i]); 
        } 
       } 
      }); 
     } 
    } 
} 

function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(browserHasGeolocation ? 
     'Error: The Geolocation service failed.' : 
     'Error: Your browser doesn\'t support geolocation.'); 
} 

आउटपुट के समान होगा:

यह मेरा कोड है? क्या कोई कामकाजी उदाहरण है?

Answer 1

एक अच्छा ब्लॉग पोस्ट है उदाहरण के साथ https://duncan99.wordpress.com/2015/01/22/animated-paths-with-google-maps/ पर एक कोड को एनिमेट करने का तरीका बताते हुए।

उस उदाहरण और आपके प्रश्न के बीच का अंतर यह है कि आपके पास अपने मार्ग में मार्ग हैं। आप या तो पूरे मार्ग को एक साथ बिंदुओं के साथ ला सकते हैं, या मार्ग को ला सकते हैं जैसा कि आप उपरोक्त कोड में कर रहे थे। मैंने नीचे एक कोडित स्निपेट शामिल किया है जो मार्ग बिंदुओं का उपयोग करता है (अधिकतम 8 मानचित्रों के मुफ़्त संस्करण के साथ उपलब्ध है)। यदि आप अपने कोड में विधि का उपयोग करते हैं, तो आपको यह सुनिश्चित करना होगा कि एनीमेशन शुरू करने से पहले पूरा पथ लोड हो गया हो।

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Map Example</title> 
 
</head> 
 

 
<body> 
 
    <button id="animate">Redo Animation</button> 
 
    <div id="map_canvas" style="width: 600px;height: 600px"></div> 
 
    <script type="text/javascript"> 
 
    var markers = [{ 
 
     "title": 'Alibaug', 
 
     "lat": '18.6581725', 
 
     "lng": '72.8637616', 
 
     "description": 'Alibaug is a coastal town and a municipal council in Raigad District in the Konkan region of Maharashtra, India.' 
 
    }, { 
 
     "title": 'Mumbai', 
 
     "lat": '19.0458547', 
 
     "lng": '72.9434202', 
 
     "description": 'Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.' 
 
    }, { 
 
     "title": 'Pune', 
 
     "lat": '18.5247663', 
 
     "lng": '73.7929273', 
 
     "description": 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.' 
 
    }]; 
 

 
    function animatePath(map, route, marker, pathCoords) { 
 
     var index = 0; 
 
     route.setPath([]); 
 
     for (var index = 0; index < pathCoords.length; index++) 
 
     setTimeout(function(offset) { 
 
      route.getPath().push(pathCoords.getAt(offset)); 
 
      marker.setPosition(pathCoords.getAt(offset)); 
 
      map.panTo(pathCoords.getAt(offset)); 
 
     }, index * 30, index); 
 
    } 
 

 
    function initialize() { 
 

 
     var mapOptions = { 
 
     center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
 
     zoom: 20, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }; 
 

 
     var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
 

 
     var infoWindow = new google.maps.InfoWindow(); 
 
     var latlngbounds = new google.maps.LatLngBounds(); 
 
     for (i = 0; i < markers.length; i++) { 
 
     var data = markers[i]; 
 
     markers[i].latLng = new google.maps.LatLng(data.lat, data.lng); 
 
     var marker = new google.maps.Marker({ 
 
      position: markers[i].latLng, 
 
      map: map, 
 
      title: data.title 
 
     }); 
 
     marker.description = markers[i].description; 
 
     latlngbounds.extend(marker.position); 
 
     google.maps.event.addListener(marker, "click", function(e) { 
 
      infoWindow.setContent(this.description); 
 
      infoWindow.open(map, this); 
 
     }); 
 
     } 
 
     map.setCenter(latlngbounds.getCenter()); 
 
     map.fitBounds(latlngbounds); 
 

 
     //Initialize the Path Array 
 
     var path = new google.maps.MVCArray(); 
 

 
     //Initialize the Direction Service 
 
     var service = new google.maps.DirectionsService(); 
 

 
     // Get the route between the points on the map 
 
     var wayPoints = []; 
 
     for (var i = 1; i < markers.length - 1; i++) { 
 
     wayPoints.push({ 
 
      location: markers[i].latLng, 
 
      stopover: false 
 
     }); 
 
     } 
 
     //Initialize the path 
 
     var poly = new google.maps.Polyline({ 
 
     map: map, 
 
     strokeColor: '#4986E7' 
 
     }); 
 
     var traceMarker = new google.maps.Marker({ 
 
     map: map, 
 
     icon: "http://maps.google.com/mapfiles/ms/micons/blue.png" 
 
     }); 
 

 
     if (markers.length >= 2) { 
 
     service.route({ 
 
      origin: markers[0].latLng, 
 
      destination: markers[markers.length - 1].latLng, 
 
      waypoints: wayPoints, 
 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
 
     }, function(result, status) { 
 
      if (status == google.maps.DirectionsStatus.OK) { 
 
      for (var j = 0, len = result.routes[0].overview_path.length; j < len; j++) { 
 
       path.push(result.routes[0].overview_path[j]); 
 
      } 
 
      animatePath(map, poly, traceMarker, path); 
 
      } 
 
     }); 
 
     } 
 

 
     document.getElementById("animate").addEventListener("click", function() { 
 
     // Animate the path when the button is clicked 
 
     animatePath(map, poly, traceMarker, path); 
 
     }); 
 

 
    }; 
 
    </script> 
 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script> 
 
</body> 
 

 
</html>