Google मानचित्र निर्देशों से एक पॉलीलाइन प्राप्त करें V3

Question

मैं दिशा-निर्देश प्राप्त करने के बाद Google मानचित्र पर पॉलीलाइन प्राप्त करने का प्रयास कर रहा हूं। मैं पॉलीलाइन के साथ मार्कर लगाने के लिए v3_epoly का उपयोग करना चाहता हूं।

मुझे this पोस्ट मिला, जो काम करता था, लेकिन मैंने पाया कि यह पूरी तरह से सटीक नहीं था। छवि में, गूगल दिशाओं हल्के नीले रंग की है और पॉलीलाइन गहरा नीला है:

आप यह काफी गलत है देख सकते हैं।

directions_service.route(req, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
    path = response.routes[0].overview_path; 
    $(path).each(function(index, item) { 
     route.getPath().push(item); 
     bounds.extend(item); 
    }); 
    route.setMap(map); 
    map.fitBounds(bounds); 
    directions_display.setDirections(response); 
    } 
}); 

किसी को भी या तो कैसे इस सटीकता में सुधार करने जानते हैं या पॉलीलाइन एक और तरीका है पाने के लिए:

इस कोड है?

संपादित करें:

मैं कोड है कि यह काम कर रहा मिला जोड़ना चाहते थे:

legs = response.routes[0].legs; 
$(legs).each(function(index, item) { 
    steps = item.steps; 
    $(steps).each(function(index, item) { 
    path = item.path; 
    $(path).each(function(index, item) { 
     route.getPath().push(item); 
     counter++; 
     bounds.extend(item); 
    }); 
    }); 
}); 

Answer 1

पॉलीलाइन के लिए overview_path का उपयोग न करें, यह सभी बिंदुओं को शामिल नहीं करता अंक बाहर हड़पने सभी पैरों में से और पॉलीलाइन बनाने के लिए उनका उपयोग करें।

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


var legs = response.routes[0].legs; 
for (i=0;i<legs.length;i++) { 
    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); 
map.fitBounds(bounds); 

example

कोड स्निपेट:

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(51.276092, 1.028938), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var directionsService = new google.maps.DirectionsService(); 
 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
 
    map: map, 
 
    preserveViewport: true 
 
    }); 
 
    directionsService.route({ 
 
    origin: new google.maps.LatLng(51.269776, 1.061326), 
 
    destination: new google.maps.LatLng(51.30118, 0.926486), 
 
    waypoints: [{ 
 
     stopover: false, 
 
     location: new google.maps.LatLng(51.263439, 1.03489) 
 
    }], 
 
    travelMode: google.maps.TravelMode.DRIVING 
 
    }, function(response, status) { 
 
    if (status === google.maps.DirectionsStatus.OK) { 
 
     // directionsDisplay.setDirections(response); 
 
     var polyline = new google.maps.Polyline({ 
 
     path: [], 
 
     strokeColor: '#0000FF', 
 
     strokeWeight: 3 
 
     }); 
 
     var bounds = new google.maps.LatLngBounds(); 
 

 

 
     var legs = response.routes[0].legs; 
 
     for (i = 0; i < legs.length; i++) { 
 
     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); 
 
    } else { 
 
     window.alert('Directions request failed due to ' + status); 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>