javascript – Google Maps API directionsService.route与Google Maps Directions不同

我正在使用Google Maps JS API搜索附近的地方,即基于我的LatLng的餐馆：

var request = {
        location: myLocation,rankBy: google.maps.places.RankBy.disTANCE,types: ['bar','cafe','food','liquor_store','lodging','meal_delivery','meal_takeaway','night_club','restaurant'],keyword: ['bar','pub']
    };
searchService.nearbySearch(request,callback);

我得到了结果数组,想要显示从数组到第一个位置的方向：

var request = {
        origin: myLocation,destination: bars[0].geometry.location,travelMode: google.maps.TravelMode.WALKING
};
directionsService.route(request,function (response,status) {
        if (status == google.maps.Directionsstatus.OK) {
            directionsdisplay.setDirections(response);
            directionsdisplay.setoptions({
                suppressMarkers: true
            });
            var myRoute = response.routes[0].legs[0];
            for (var i = 0; i < myRoute.steps.length; i++) {
                Map.marker(myRoute.steps[i].start_location,myRoute.steps[i].instructions);
            }
        } else {
            console.log("directionsService : " + status);
        }
    });

其中bars [0]是包含searchService.nearbySearch查询结果的数组.

我确实得到了指示,但即使正确放置了引脚,最后的“虚线腿”也似乎丢失了.当您将其与maps.google.com指示进行比较时,引脚和方向路线之间会出现虚线.

我的API说明：http://damianbilski.com/temp/api_example.png

Maps.google.com路线：http://damianbilski.com/temp/online_example.png

任何想法如何使用directionsService.route获得最后一个虚线的腿.
非常感谢你的帮助！

解决方法

Google Maps Javascript API v3路线服务不会为您执行此操作(至少目前为止).如果需要,可以从路线结果的末尾添加“虚线”折线到地点的位置.

proof of concept fiddle

代码段：

var geocoder;
var map;
var searchService;
var myLocation;
var directionsService = new google.maps.DirectionsService();
var directionsdisplay = new google.maps.DirectionsRenderer();

function initialize() {
  var 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
    });
  myLocation = map.getCenter();
  var marker = new google.maps.Marker({
    position: myLocation,map: map
  });
  searchService = new google.maps.places.PlacesService(map);
  directionsdisplay.setMap(map);
  var request = {
    location: myLocation,'pub']
  };
  searchService.nearbySearch(request,function(bars,status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      var barMark = new google.maps.Marker({
        position: bars[0].geometry.location,map: map,icon: {
          url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",size: new google.maps.Size(7,7),anchor: new google.maps.Point(3.5,3.5)
        }
      });
      var request = {
        origin: myLocation,travelMode: google.maps.TravelMode.WALKING
      };
      directionsService.route(request,function(response,status) {
        if (status == google.maps.Directionsstatus.OK) {
          directionsdisplay.setDirections(response);
          directionsdisplay.setoptions({
            suppressMarkers: true,preserveViewport: true
          });
          var polyline = getpolyline(response);
          map.setCenter(polyline.getPath().getAt(polyline.getPath().getLength() - 1));
          map.setZoom(19);

          var lineLength = google.maps.geometry.spherical.computedistanceBetween(bars[0].geometry.location,polyline.getPath().getAt(polyline.getPath().getLength() - 1));
          var lineheading = google.maps.geometry.spherical.computeheading(bars[0].geometry.location,polyline.getPath().getAt(polyline.getPath().getLength() - 1));
          var markerO = new google.maps.Marker({
            position: google.maps.geometry.spherical.computeOffset(bars[0].geometry.location,lineLength * 0.1,lineheading)
          });
          var markerD = new google.maps.Marker({
            position: google.maps.geometry.spherical.computeOffset(bars[0].geometry.location,lineLength * 0.9,lineheading)
          });

          var markerA = new google.maps.Marker({
            position: google.maps.geometry.spherical.computeOffset(markerO.getPosition(),lineLength / 3,lineheading - 40)
          });
          var markerB = new google.maps.Marker({
            position: google.maps.geometry.spherical.computeOffset(markerD.getPosition(),lineheading - 140)
          });

          var curvedLine = new GmapsCubicBezier(markerO.getPosition(),markerA.getPosition(),markerB.getPosition(),markerD.getPosition(),0.01,map);

          var line = new google.maps.polyline({
            path: [bars[0].geometry.location,polyline.getPath().getAt(polyline.getPath().getLength() - 1)],strokeOpacity: 0,icons: [{
              icon: {
                path: 'M 0,-1 0,1',strokeOpacity: 1,scale: 4
              },offset: '0',repeat: '20px'
            }],// map: map
          });
        } else {
          console.log("directionsService : " + status);
        }
      });
    }
  });
}
google.maps.event.addDomListener(window,"load",initialize);

function getpolyline(result) {
  var polyline = new google.maps.polyline({
    path: []
  });
  var path = result.routes[0].overview_path;
  var legs = result.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]);
      }
    }
  }
  return polyline;
}

var GmapsCubicBezier = function(latlong1,latlong2,latlong3,latlong4,resolution,map) {
  var lat1 = latlong1.lat();
  var long1 = latlong1.lng();
  var lat2 = latlong2.lat();
  var long2 = latlong2.lng();
  var lat3 = latlong3.lat();
  var long3 = latlong3.lng();
  var lat4 = latlong4.lat();
  var long4 = latlong4.lng();

  var points = [];

  for (it = 0; it <= 1; it += resolution) {
    points.push(this.getBezier({
      x: lat1,y: long1
    },{
      x: lat2,y: long2
    },{
      x: lat3,y: long3
    },{
      x: lat4,y: long4
    },it));
  }
  var path = [];
  for (var i = 0; i < points.length - 1; i++) {
    path.push(new google.maps.LatLng(points[i].x,points[i].y));
    path.push(new google.maps.LatLng(points[i + 1].x,points[i + 1].y,false));
  }

  var Line = new google.maps.polyline({
    path: path,geodesic: true,strokeOpacity: 0.0,icons: [{
      icon: {
        path: 'M 0,scale: 4
      },repeat: '20px'
    }],strokeColor: 'grey'
  });

  Line.setMap(map);

  return Line;
};


GmapsCubicBezier.prototype = {

  B1: function(t) {
    return t * t * t;
  },B2: function(t) {
    return 3 * t * t * (1 - t);
  },B3: function(t) {
    return 3 * t * (1 - t) * (1 - t);
  },B4: function(t) {
    return (1 - t) * (1 - t) * (1 - t);
  },getBezier: function(C1,C2,C3,C4,percent) {
    var pos = {};
    pos.x = C1.x * this.B1(percent) + C2.x * this.B2(percent) + C3.x * this.B3(percent) + C4.x * this.B4(percent);
    pos.y = C1.y * this.B1(percent) + C2.y * this.B2(percent) + C3.y * this.B3(percent) + C4.y * this.B4(percent);
    return pos;
  }
};

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

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