从Google地图方向V3获取折线 [英] Get a polyline from Google maps directions V3

问题描述

我试图在获得路线后在Google地图上获得多段线。我想使用

代码段：

  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]。对于（j = 0; j  

  html，body，＃map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//   

I am trying to get a polyline on a Google map after getting directions. I want to use the v3_epoly to place markers along a polyline.

I found this post, which worked, but I found it wasn't completely accurate. In the image, the Google directions is the light blue and the polyline is the darker blue:

You can see it's quite inaccurate.

This is the code:

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

Anyone know either how to improve this accuracy or to get the polyline another way?

EDIT:

I wanted to add the code that got it working:

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

解决方案

Don't use overview_path for the polyline, it doesn't include all the points, grab the points out of all the legs and use them to create the polyline.

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

code snippet:

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>

这篇关于从Google地图方向V3获取折线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！