Google Map API V3如何绘制像GoogleMaps网络应用程序一样的行走路径？

Question

在我的应用程序中，我使用以下代码绘制从始发地到目的地的行车路线：

directionsStartService.route(start_request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response); etc...

我添加了一个新功能来显示用户可以通过步行做路径的intersectionPoints，但我需要像这样绘制这样的路径：

https://www.google.it/maps/dir/Via+Giuseppe+Moruzzi,+1,+I-56124+Pisa+PI,+Italia/Dipartimento+di+Chimica+e+Chimica+Industriale/@43.7185239,10.4238179,18z/data=!3m1!4b1!4m14!4m13!1m5!1m1!1s0x12d591c15cbd6abd:0xb773ccba3d93b1d8!2m2!1d10.4222234!2d43.7185511!1m5!1m1!1s0x0:0xe33d73daefe47799!2m2!1d10.427329!2d43.7172621!3e2

有可能吗？我使用了Maps Javascript API。

祝你好运， 詹卢卡

Answer 1

一个选项，利用相关问题的代码：How do you change the color of the dotted line on Google map v3 directions（将travelMode更改为WALKING并从路线结尾处添加额外的折线到请求的位置将是下面的代码。

proof of concept fiddle

代码段

＆＃13;

＆＃13;

var geocoder;
var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var m1 = new google.maps.Marker({
    map: map,
    title: "start",
    position: new google.maps.LatLng(43.718526, 10.422241)
  });
  var m2 = new google.maps.Marker({
    map: map,
    title: "end",
    position: new google.maps.LatLng(43.717234, 10.427337)
  });

  var directionsDisplay = new google.maps.DirectionsRenderer();
  var directionsService = new google.maps.DirectionsService();
  calculateAndDisplayRoute(new google.maps.LatLng(43.718526, 10.422241),
    new google.maps.LatLng(43.717234, 10.427337),
    directionsService, directionsDisplay);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('right-panel'));
}
google.maps.event.addDomListener(window, "load", initialize);

function calculateAndDisplayRoute(start, end, directionsService, directionsDisplay) {
  directionsService.route({
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.WALKING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      // directionsDisplay.setDirections(response);
      console.log(end.toUrlValue(6));
      renderDirectionsPolylines(response, start, end);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
var polylineOptions = {
  strokeColor: '#C83939',
  strokeOpacity: 1,
  strokeWeight: 4
};
var walkingPolylineOptions = {
  strokeColor: '#C83939',
  strokeOpacity: 0,
  strokeWeight: 4,
  icons: [{
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: '#C83939',
      fillOpacity: 1,
      scale: 2,
      strokeColor: '#C83939',
      strokeOpacity: 1,
    },
    offset: '0',
    repeat: '10px'
  }]
};
var walkingPolylineOptions2 = {
  strokeColor: '#C83939',
  strokeOpacity: 0,
  strokeWeight: 4,
  icons: [{
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: '#808080',
      fillOpacity: 1,
      scale: 2,
      strokeColor: '#808080',
      strokeOpacity: 1,
    },
    offset: '0',
    repeat: '10px'
  }]
};

function renderDirectionsPolylines(response, start, end) {
  var legs = response.routes[0].legs;
  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < legs.length; i++) {
    var steps = legs[i].steps;
    for (j = 0; j < steps.length; j++) {
      var nextSegment = steps[j].path;
      var stepPolyline = new google.maps.Polyline(polylineOptions);
      if (steps[j].travel_mode == google.maps.TravelMode.WALKING) {
        stepPolyline.setOptions(walkingPolylineOptions)
      }
      for (k = 0; k < nextSegment.length; k++) {
        stepPolyline.getPath().push(nextSegment[k]);
        bounds.extend(nextSegment[k]);
      }
      stepPolyline.setMap(map);
    }
  }
  if (google.maps.geometry.spherical.computeDistanceBetween(start, stepPolyline.getPath().getAt(0)) > 1) {
    // add "dotted line"
    var extraLine1 = new google.maps.Polyline(walkingPolylineOptions2);
    extraLine1.setPath([stepPolyline.getPath().getAt(stepPolyline.getPath().getLength() - 1), end]);
    extraLine1.setMap(map);
  }
  if (google.maps.geometry.spherical.computeDistanceBetween(end, stepPolyline.getPath().getAt(stepPolyline.getPath().getLength() - 1)) > 1) {
    // add "dotted line"
    var extraLine2 = new google.maps.Polyline(walkingPolylineOptions2);
    extraLine2.setPath([stepPolyline.getPath().getAt(stepPolyline.getPath().getLength() - 1), end]);
    extraLine2.setMap(map);
  }
  map.fitBounds(bounds);
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;