從Google地圖方向獲取多段線V3

我想在獲取路線後在Google地圖上獲取多段線。我想使用v3_epoly沿着多段線放置標記。從Google地圖方向獲取多段線V3

我發現this後，其中工作，但我發現它並不完全準確。在圖像中，谷歌的方向是淡藍色和折線是深藍色：

enter image description here

你可以看到它是相當不準確的。

這是代碼：

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); 
    }); 
    }); 
});

來源

2013-04-23 skeniver

不要使用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>

來源

2013-04-23 23:38:09 geocodezip

從Google地圖方向獲取多段線V3

回答

相關問題