如何在 Google Maps API 中沿起点和终点之间的路线获取地点（例如加油站）

Posted 2023-02-23

【中文标题】如何在 Google Maps API 中沿起点和终点之间的路线获取地点（例如加油站）

【英文标题】：How to to Get Places (e.g Gas Stations) along Route Between Origin and Destination in Google Maps API

【发布时间】：2013-03-30 02:52:24

【问题描述】：

您能否告诉我是否可以在 Google Maps API 中获取所有地点的列表，例如沿起点和终点之间的路线的加油站？ Here 是一个链接，我试图根据方向支持的路线列出两点之间的所有加油站或休息区（或任何 Google Maps API 支持的地点类型）。

到目前为止，这是我的代码：

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 对象数组。 对于每个边界，使用 Places 库来搜索地点。

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

example

（但是，看看结果是如何分组的，看起来位置服务正在围绕边界的中心进行搜索，而不是在边界内，但它可能足以满足您的需求）。

代码 sn-p：

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>