Google 使用 RouteBoxer 未返回完整结果的地方

Google Places not returning complete results with RouteBoxer

编辑:我似乎达到了查询限制,但我没有被 return 编辑完整的 200 个结果。因此,经过进一步研究,Google API 似乎可以让我查询 10 个框,return 那些结果,然后用 OVER_QUERY_LIMIT 状态来打扰我。所以我想我现在有两个选择:减慢我的查询速度,或者扩大我的距离以沿路线创建更少的盒子。

我目前正在闲逛构建一个小网络应用程序,提供有关沿途地点的详细信息(例如加油站和公路旅行中的咖啡)。我将 Google 地图 API 与 Places Library 和 RouteBoxer 一起使用。 我正在使用 RouteBoxer 生成所有合适的框,但是当框被传递到 Places Library 时,我只会返回一些位置。 通常我会得到前半部分路线的一部分(在较短的路线上)或一些随机块(对于较长的路线)。旧金山到西雅图 return 是西雅图附近和俄勒冈州梅德福附近的加油站。

最初我以为我可能达到了 200 个结果上限,但它对每个框都提出了单独的请求,而我的总结果通常达不到 200 个。结果 returned 通常非常一致据我所知。在查看我的网络请求和响应的详细信息时,脚本似乎正在通过 Places 库发出请求的框移动,突然它在中途停止。

可以查看结果和框的实时应用程序已上线 Heroku

我的JavaScript无论如何都不是最强的。这就是我想使用这个 API 的部分原因,所以如果我犯了一个微不足道的错误,请原谅我的无知。完整的脚本如下。非常感谢任何方向!

var infowindow = new google.maps.InfoWindow();
var map;
var routeBoxer;
var service;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(39, -98),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  service = new google.maps.places.PlacesService(map);

  routeBoxer = new RouteBoxer();

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

  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directions-panel'));
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var waypt1 = document.getElementById('waypoint1').value;
  var waypt2 = document.getElementById('waypoint2').value;
  var waypts = []

  if (waypt1) {
    waypts.push({
      location:waypt1,
      stopover:true});  
  }
  if (waypt2) {
    waypts.push({
      location:waypt2,
      stopover:true});  
  }

  var request = {
    origin: start,
    destination: end,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  };

  directionService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);

      // Build boxes around route
      var path = response.routes[0].overview_path;
      var boxes = routeBoxer.box(path, 2); // distance in km from route
      drawBoxes(boxes);
      for (var i=0; i < boxes.length; i++) {
        var bounds = boxes[i];
        findPlaces(bounds);
        findPlacesByText(bounds);
      }
    } else {
      alert("Directions query failed: " + status);
    }
  });
}

function findPlaces(bounds) {
  var selectedTypes = []; 

  var inputElements = document.getElementsByClassName('placeOption');

  for (var i=0; inputElements[i]; i++) {
    if (inputElements[i].checked) {
     selectedTypes.push(inputElements[i].value)
    }
  }

  var request = {
    bounds: bounds,
    types: selectedTypes
  };

  if (selectedTypes.length > 0) {
    service.radarSearch(request, callback);
  }
}

function findPlacesByText(bounds) {
  var selectedTypes = ''; 

  var inputElements = document.getElementsByClassName('textOption');

  for (var i=0; inputElements[i]; i++) {
    if (inputElements[i].checked) {
     selectedTypes += inputElements[i].value + ', '
    }
  }

  var request = {
    bounds: bounds,
    query: selectedTypes
  };

  if (selectedTypes.length > 0) {
    service.textSearch(request, callback);
  }
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  var marker = new google.maps.Marker({
    map: map,
    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);
      }
    });
  });
}

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

经过大量实验和进一步研究,我决定尝试放慢查询速度。我处理这个问题的方法是编写一个调用我的查询函数的新函数,然后递归调用自身并延迟下一个路由框。如果返回 OVER_QUERY_LIMIT 状态,它会以增加的延迟召回该框。到目前为止,它似乎工作得很好,但它很快将调用之间的延迟增加到将近半秒(或更多),如果您的路线很长且有很多盒子,这可能需要一段时间。我的新功能似乎已经解决了这个问题,如下所示。需要更多的微调才能真正做到正确,但已经很接近了!

var delay = 100;

...

function queryPlaces(boxes, searchIndex) {
  // delay calls to Places API to prevent going over query limit (10/sec)
  var bounds = boxes[searchIndex];
  findPlaces(bounds);
  findPlacesByText(bounds);
  if (searchIndex > 0) {
    searchIndex--;
    setTimeout(queryPlaces, delay, boxes, searchIndex);
  }
}