Gmap js API在地点之间绘制路线并使用优先顺序

时间:2019-10-10 08:26:58

标签: javascript google-maps

我正在使用这种gmap航点方法在Google地图上绘制起点和终点(或可以是坐标)之间的路线

var DIRECTIONS_SERVICE = new google.maps.DirectionsService();
var DIRECTIONS_RENDER = new google.maps.DirectionsRenderer({map: TOUR_GMAP});

DIRECTIONS_SERVICE.route({
    origin: { 'placeId': startPoint },
    destination: { 'placeId': endPoint },
    waypoints: waypoints,
    optimizeWaypoints: true,
    travelMode: 'DRIVING'
}, function(response, status) {

    if (status === 'OK') {          
        //DIRECTIONS_RENDER.setOptions( { suppressMarkers: true } ); // hides AB, B .. points
        DIRECTIONS_RENDER.setDirections(response);
        DIRECTIONS_RENDER_RESPONSE = response;          
        TM_calculateRouteDistance(START_TIME);
    } else {
        window.alert('Problem in showing direction due to ' + status);
    }
});

问题,我知道Google会绘制最佳路线,但我需要添加一些优先级,例如我需要精确地将C点作为起点之后的第一个访问点(这样它将转换为A点)。

DirectionsRenderer中是否有这样的礼节性选项? 还是我会给另一个近似的例如谷歌将按给定的顺序拖曳路线5点?

1 个答案:

答案 0 :(得分:1)

从您的请求中删除optimizeWaypoints: true,然后按所需顺序放置路标。

DIRECTIONS_SERVICE.route({
    origin: { 'placeId': startPoint },
    destination: { 'placeId': endPoint },
    waypoints: waypoints,
    // optimizeWaypoints: true, <=========== remove this
    travelMode: 'DRIVING'
},

proof of concept fiddle

optimizeWaypoints: trueresulting map with optimizeWaypoints: true

没有optimizeWaypoints: trueresulting map without optimizeWaypoints: true

代码段:

function initMap() {
  var startPoint = "ChIJHQ6aMnBTwokRc-T-3CrcvOE"; // Newark, NJ
  var endPoint = "ChIJGzE9DS1l44kRoOhiASS_fHg"; // Boston, MA
  var waypoints = [{
      location: {
        placeId: "ChIJS_tPzDQK3okRxCjnoBJjoeE"
      }, // Albany, NY
      stopover: true
    },
    {
      location: {
        placeId: "ChIJOwg_06VPwokRYv534QaPC8g"
      }, // New York, NY
      stopover: true
    },
    {
      location: {
        placeId: "ChIJpVER8hFT5okRmVl96ahKjsw"
      }, // Hartford, CT
      stopover: true
    }
  ]
  var TOUR_GMAP = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {
      lat: 41.85,
      lng: -87.65
    }
  });
  var DIRECTIONS_SERVICE = new google.maps.DirectionsService();
  var DIRECTIONS_RENDER = new google.maps.DirectionsRenderer({
    map: TOUR_GMAP
  });

  DIRECTIONS_SERVICE.route({
    origin: {
      'placeId': startPoint
    },
    destination: {
      'placeId': endPoint
    },
    waypoints: waypoints,
    travelMode: 'DRIVING'
  }, function(response, status) {

    if (status === 'OK') {
      //DIRECTIONS_RENDER.setOptions( { suppressMarkers: true } ); // hides AB, B .. points
      DIRECTIONS_RENDER.setDirections(response);
      DIRECTIONS_RENDER_RESPONSE = response;
      TM_calculateRouteDistance(START_TIME);
    } else {
      window.alert('Problem in showing direction due to ' + status);
    }
  });
}
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>