如何在 Google Maps API 中沿起点和终点之间的路线获取地点(例如加油站) [英] How to to Get Places (e.g Gas Stations) along Route Between Origin and Destination in Google Maps API

问题描述

您能否告诉我是否可以在 Google Maps API 中获取所有地点的列表，例如沿起点和终点之间路线的加油站?这里是一个链接，我试图列出所有加油站或休息区(或任何 Google Maps API 支持的地点类型)基于方向支持的路线的两点之间.

Can you please let me know if it is possible to get list of all places for example Gas Stations along Route Between Origin and Destination in Google Maps API? Here is a link that I am trying to list all Gas Stations or Rest areas ( or any of Google Maps API Supported Place Types)between two points ans based on a Direction supported route.

这是我目前的代码:

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var haight = new google.maps.LatLng(49.216364,-122.811897);
var oceanBeach = new google.maps.LatLng(50.131446,-119.506838);

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
  zoom: 14,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  center: haight
}
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);

    calcRoute();
 }

function calcRoute() {
  var request = {
  origin: haight,
  destination: oceanBeach,
  travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
   if (status == google.maps.DirectionsStatus.OK) {
       directionsDisplay.setDirections(response);
      }
 });
}

google.maps.event.addDomListener(window, 'load', initialize);

编辑部分:

// Make the directions request
  directionService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsRenderer.setDirections(result);

      // Box around the overview path of the first route
      var path = result.routes[0].overview_path;
      var boxes = routeBoxer.box(path, distance);
      drawBoxes(boxes);
    } else {
      alert("Directions query failed: " + status);
    }

      for (var i = 0; i < boxes.length; i++) {
  var bounds = box[i];
  // Perform search over this bounds 
}



  });
}

推荐答案

1. 使用 RouteBoxer 获取一组 google.maps.LatLngBounds 覆盖路线的对象.
2. 对于每个边界，请使用 Places 库来搜索地点.

1. Use the RouteBoxer to get an array of google.maps.LatLngBounds objects that cover the route.
2. for each of those bounds use the Places library to search for the places.

请注意，地点请求有查询限制和配额，因此对于长路线这可能不切实际.

Note that there are query limits and quotas on the places requests, so for long routes this may not be practical.

示例

(但是，查看结果的分组方式，似乎地点服务是在边界中心搜索，而不是在边界内搜索，但这可能足以满足您的需求).

(however, looking at how the results are grouped, it looks like the places service is searching around the center of the bounds, rather than in the bounds, but it might be good enough for your needs).

代码片段:

var map = null;
var boxpolys = null;
var directions = null;
var routeBoxer = null;
var distance = null; // km
var service = null;
var gmarkers = [];
var boxes = null;
var infowindow = new google.maps.InfoWindow();

function initialize() {
  // Default the map view to the continental U.S.
  var mapOptions = {
    center: new google.maps.LatLng(40, -80.5),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 8
  };

  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  service = new google.maps.places.PlacesService(map);

  routeBoxer = new RouteBoxer();

  directionService = new google.maps.DirectionsService();
  directionsRenderer = new google.maps.DirectionsRenderer({
    map: map
  });

  // If there are any parameters at eh end of the URL, they will be in  location.search
  // looking something like  "?marker=3"

  // skip the first character, we are not interested in the "?"
  var query = location.search.substring(1);

  // split the rest at each "&" character to give a list of  "argname=value"  pairs
  var pairs = query.split("&");
  for (var i = 0; i < pairs.length; i++) {
    // break each pair at the first "=" to obtain the argname and value
    var pos = pairs[i].indexOf("=");
    var argname = pairs[i].substring(0, pos).toLowerCase();
    var value = pairs[i].substring(pos + 1).toLowerCase();

    // process each possible argname  -  use unescape() if theres any chance of spaces
    if (argname == "to") {
      document.getElementById('to').value = unescape(value);
    }
    if (argname == "from") {
      document.getElementById('from').value = unescape(value);
    }
    if (argname == "dist") {
      document.getElementById('distance').value = parseFloat(value);
    }
    if (argname == "type") {
      document.getElementById('type').value = unescape(value);
    }
    if (argname == "keyword") {
      document.getElementById('keyword').value = unescape(value);
    }
    if (argname == "name") {
      document.getElementById('name').value = unescape(value);
    }
    if (argname == "submit") {
      route();
    }
  }

}

function route() {
  // Clear any previous route boxes from the map
  clearBoxes();

  // Convert the distance to box around the route from miles to km
  distance = parseFloat(document.getElementById("distance").value) * 1.609344;

  var request = {
    origin: document.getElementById("from").value,
    destination: document.getElementById("to").value,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  }

  // Make the directions request
  directionService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsRenderer.setDirections(result);

      // Box around the overview path of the first route
      var path = result.routes[0].overview_path;
      boxes = routeBoxer.box(path, distance);
      // alert(boxes.length);
      drawBoxes();
      findPlaces(0);
    } else {
      alert("Directions query failed: " + status);
    }
  });
}

// Draw the array of boxes as polylines on the map
function drawBoxes() {
  boxpolys = new Array(boxes.length);
  for (var i = 0; i < boxes.length; i++) {
    boxpolys[i] = new google.maps.Rectangle({
      bounds: boxes[i],
      fillOpacity: 0,
      strokeOpacity: 1.0,
      strokeColor: '#000000',
      strokeWeight: 1,
      map: map
    });
  }
}


function findPlaces(searchIndex) {
  var type = document.getElementById('type').value;
  var keyword = document.getElementById('keyword').value;
  var name = document.getElementById('name').value;
  var request = {
    bounds: boxes[searchIndex],
  };
  if (!!type && (type != "")) {
    if (type.indexOf(',') > 0)
      request.types = type.split(',');
    else
      request.types = [type];
  }
  if (!!keyword && (keyword != "")) request.keyword = keyword;
  if (!!name && (name != "")) request.name = name;
  service.nearbySearch(request, function(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      document.getElementById('side_bar').innerHTML += "bounds[" + searchIndex + "] returns " + results.length + " results<br>"
      for (var i = 0, result; result = results[i]; i++) {
        var marker = createMarker(result);
      }
    } else {
      document.getElementById('side_bar').innerHTML += "bounds[" + searchIndex + "] returns 0 results<br>&nbsp;status=" + status + "<br>";
    }
    if (status != google.maps.places.PlacesServiceStatus.OVER_QUERY_LIMIT) {
      searchIndex++;
      if (searchIndex < boxes.length)
        findPlaces(searchIndex);
    } else { // delay 1 second and try again
      setTimeout("findPlaces(" + searchIndex + ")", 1000);
    }

  });
}

// Clear boxes currently on the map
function clearBoxes() {
  if (boxpolys != null) {
    for (var i = 0; i < boxpolys.length; i++) {
      boxpolys[i].setMap(null);
    }
  }
  boxpolys = null;
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  if (place.icon) {
    var image = new google.maps.MarkerImage(
      place.icon, new google.maps.Size(71, 71),
      new google.maps.Point(0, 0), new google.maps.Point(17, 34),
      new google.maps.Size(25, 25));
  } else var image = {
    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 marker = new google.maps.Marker({
    map: map,
    icon: image,
    position: place.geometry.location
  });
  var request = {
    reference: place.reference
  };
  google.maps.event.addListener(marker, 'click', function() {
    service.getDetails(request, function(place, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        var contentStr = '<h5>' + place.name + '</h5><p>' + place.formatted_address;
        if (!!place.formatted_phone_number) contentStr += '<br>' + place.formatted_phone_number;
        if (!!place.website) contentStr += '<br><a target="_blank" href="' + place.website + '">' + place.website + '</a>';
        contentStr += '<br>' + place.types + '</p>';
        infowindow.setContent(contentStr);
        infowindow.open(map, marker);
      } else {
        var contentStr = "<h5>No Result, status=" + status + "</h5>";
        infowindow.setContent(contentStr);
        infowindow.open(map, marker);
      }
    });

  });
  gmarkers.push(marker);
  if (!place.name) place.name = "result " + gmarkers.length;
  var side_bar_html = "<a href='javascript:google.maps.event.trigger(gmarkers[" + parseInt(gmarkers.length - 1) + "],"click");'>" + place.name + "</a><br>";
  document.getElementById('side_bar').innerHTML += side_bar_html;
}

google.maps.event.addDomListener(window, 'load', initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/denissellu/routeboxer@master/src/RouteBoxer.js" type="text/javascript"></script>
<table border="1">
  <tr>
    <td valign="top">
      <div id="map" style="width: 600px; height: 500px;"></div>
    </td>
    <td>
      <div id="side_bar" style="width:200px; height: 600px; overflow: auto"></div>
    </td>
  </tr>
</table>
Box within at least
<input type="text" id="distance" value="3" size="2">miles of the route from
<input type="text" id="from" value="denver" />to
<input type="text" id="to" value="oklahoma city, OK" />
<input type="submit" onclick="route()" />
<br>
<label>type</label>
<input type="text" id="type" value="gas_station" />
<label>keyword</label>
<input type="text" id="keyword" value="" />
<label>name</label>
<input type="text" id="name" value="" />
<div id="towns"></div>

这篇关于如何在 Google Maps API 中沿起点和终点之间的路线获取地点(例如加油站)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！