在 Gmaps Api 中使用一个航点作为目的地 | 中使用一个航点作为目的地

本文介绍了在 Gmaps Api 中使用一个航点作为目的地的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 gmaps Api 为必须访问市场列表(我的航点)以记录其股票的人制定路线.我使用用户的房屋位置作为路线的起点和市场的位置作为我的航点.问题是我不知道哪个路点是路线的目的地，因为我在调用方向服务时设置了属性optimization = true，但是api需要一个目的地来跟踪路线.>

我需要的是一种方法来告诉 api 使用我优化路线的最后一个航点作为目的地.

解决方案

您可以向路线服务发出多个请求，一个请求将每个可能的航点作为最终目的地，选择最短的结果距离.

概念证明小提琴

代码片段:

var map;var 方向服务 = [];var 方向显示 = [];//常量起始"地址var start = "Paramus, NJ";//可能的候选目的地/航点列表(必须小于 9)var 位置 = ["67 E Ridgewood Ave, Paramus, NJ 07652","450 Rochelle Ave, Rochelle Park, NJ 07662,","720 River Rd, New Milford, NJ 07646","280 Main St, New Milford, NJ 07646","469 Passaic St, Hackensack, NJ 07601","91 Broadway, Elmwood Park, NJ 07407",206 Market St, Saddle Brook, NJ 07662"];var 路由 = [];函数初始化(){var map = new google.maps.Map(document.getElementById("map_canvas"), {中心:新的 google.maps.LatLng(37.4419, -122.1419)，缩放:13，mapTypeId: google.maps.MapTypeId.ROADMAP});document.getElementById('info').innerHTML += "<u><b>中间结果:</b></u><br>";getDirections(开始，位置，地图)；}google.maps.event.addDomListener(窗口，加载"，初始化)；函数 getDirections(开始，航点，地图){var 请求 = [];无功请求 = {起源:开始，优化航路点:真，旅行模式:google.maps.TravelMode.DRIVING};for (var j = 0; j ";if (routes.length ==locations.length) {路线.排序(sortFcn)；var directionDisplay = new google.maps.DirectionsRenderer({地图:地图，折线选项:{中风不透明度:0.9，行程重量:4，strokeColor: "黑色",z索引:10}});DirectionsDisplay.setDirections(响应)；方向显示.setMap(地图);document.getElementById('info').innerHTML += "<u><b>最短结果:</b></u><br>"+ 路线[0].index + " dist:" + (routes[0].distance/1000).toFixed(2) + " km dur:" + (routes[0].duration/60).toFixed(2)+ " min dest:" + routes[0].index + " loc:" +locations[index] + " waypt order:" + routes[0].waypoint_order + "<br>";}} 别的 {window.alert('由于'+状态，路线请求失败);}});}函数 sortFcn(a, b) {如果 (a.distance > b.distance) 返回 1;else if (a.distance < b.distance) return -1;否则返回0；}

html,身体，#map_canvas {高度:100%；宽度:100%；边距:0px；填充:0px}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></脚本><div id="信息"></div><div id="map_canvas"></div>

I'm using gmaps Api to make a route for a person who have to visit a list of markets (my waypoints) to take note of their stocks. I'm using the user's house location for the origin of the route and the location of the markets as my waypoints. The problem is that I don't know which waypoint is the route's destination because I set the property optimization = true when call the the direction service, but the api needs a destination to trace the route.

What I need is a way to tell the api to use the last waypoint of my optimized route as a destination.

解决方案

You could make multiple requests to the directions service, one with each possible waypoint as the final destination, pick the shortest resulting distance.

proof of concept fiddle

code snippet:

var map;
var directionsServices = [];
var directionsDisplays = [];
// constant "start" address
var start = "Paramus, NJ";
// list of possible candidate destinations/waypoints (must be < 9)
var locations = ["67 E Ridgewood Ave, Paramus, NJ 07652",
  "450 Rochelle Ave, Rochelle Park, NJ 07662,",
  "720 River Rd, New Milford, NJ 07646",
  "280 Main St, New Milford, NJ 07646",
  "469 Passaic St, Hackensack, NJ 07601",
  "91 Broadway, Elmwood Park, NJ 07407",
  "206 Market St, Saddle Brook, NJ 07662"
];
var routes = [];

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
    });
  document.getElementById('info').innerHTML += "<u><b>intermediate results:</b></u><br>";
  getDirections(start, locations, map);
}
google.maps.event.addDomListener(window, "load", initialize);

function getDirections(start, waypoints, map) {
  var requests = [];
  var request = {
    origin: start,
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  };
  for (var j = 0; j < waypoints.length; j++) {
    var waypts = [];
    for (var i = 0; i < waypoints.length; i++) {
      if (i != j) {
        waypts.push({
          location: waypoints[i],
          stopover: true
        });
      }
    }
    requests[j] = {};
    requests[j].destination = waypoints[j];
    requests[j].waypoints = waypts;
    requests[j].origin = start;
    requests[j].optimizeWaypoints = true;
    requests[j].travelMode = google.maps.TravelMode.DRIVING;

    setTimeout(function(request, j) {
      sendDirectionsRequest(request, j, map);
    }(requests[j], j), 3000 * j);
  }
}

function sendDirectionsRequest(request, index, map) {
  var directionsService = new google.maps.DirectionsService();
  directionsServices.push(directionsService);
  directionsService.route(request, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      var route = response.routes[0];
      routes.push(route);
      var distance = 0;
      var duration = 0;
      for (var i = 0; i < route.legs.length; i++) {
        distance += route.legs[i].distance.value;
        duration += route.legs[i].duration.value;
      }
      route.distance = distance;
      route.duration = duration;
      route.index = index;
      document.getElementById('info').innerHTML += (routes.length - 1) + " dist:" + (route.distance / 1000).toFixed(2) + " km dur:" + (route.duration / 60).toFixed(2) + " min dest:" + index + " loc:" + locations[index] + " waypt order:" + route.waypoint_order + "<br>";
      if (routes.length == locations.length) {
        routes.sort(sortFcn);
        var directionsDisplay = new google.maps.DirectionsRenderer({
          map: map,
          polylineOptions: {
            strokeOpacity: 0.9,
            strokeWeight: 4,
            strokeColor: "black",
            zIndex: 10
          }
        });
        directionsDisplay.setDirections(response);
        directionsDisplay.setMap(map);
        document.getElementById('info').innerHTML += "<u><b>shortest result:</b></u><br>" + routes[0].index + " dist:" + (routes[0].distance / 1000).toFixed(2) + " km dur:" + (routes[0].duration / 60).toFixed(2) + " min dest:" + routes[0].index + " loc:" + locations[index] + " waypt order:" + routes[0].waypoint_order + "<br>";
      }
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

function sortFcn(a, b) {
  if (a.distance > b.distance) return 1;
  else if (a.distance < b.distance) return -1;
  else return 0;
}

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

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

这篇关于在 Gmaps Api 中使用一个航点作为目的地的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！