关键词：
【中文标题】仅基于 2 个航点显示 Google PlacesSearch 结果【英文标题】：Show Google PlacesSearch results, based on only 2 WayPoints 【发布时间】：2018-03-19 15:52:53 【问题描述】：希望你能帮助我。我的网站上出现了谷歌地图，使用 Angular JS 1。（虽然很多代码是 vanilla js）。
在我的地图上，如果您搜索起点和终点，标记会下降并显示从起点到终点的谷歌路线。伟大的！ :)
不过，我还编写了代码让餐厅也出现在此结果中。但是，由于 google 配额，在经过一定数量的 WayPoints（路线/腿/步）后，餐厅停止出现。
我只想在搜索结果中显示最多 3 个航点的餐厅结果（由于配额/API 限制）。
我该怎么做？
这是我的指令代码。
/* global google */
googleMap.$inject = ['Directions'];
function googleMap(Directions)
console.log('map directive loaded');
return
restrict: 'E',
template: '<div class="google-map"></div>',
replace: true,
scope:
center: '=',
zoom: '=',
origin: '=',
destination: '=',
travelMode: '='
,
link($scope, $element)
const map = new google.maps.Map($element[0],
zoom: $scope.zoom,
center: $scope.center
);
$scope.$watch('center', () => map.setCenter($scope.center), true);
$scope.$watchGroup(['origin', 'destination', 'travelMode'],
displayRoute, displayRestaurants);
// DISPLAY ROUTE
function displayRoute()
if (!$scope.origin || !$scope.destination || !$scope.travelMode)
return false;
const directionsDisplay = new google.maps.DirectionsRenderer();
const placesService = new google.maps.places.PlacesService(map);
directionsDisplay.setMap(map);
Directions.route(
origin: $scope.origin,
destination: $scope.destination,
travelMode: $scope.travelMode
, (response) =>
directionsDisplay.setDirections(response);
response.routes[0].legs[0].steps.map(step =>
placesService.nearbySearch(
location: step.start_point,
radius: 50,
type: ['restaurant']
, (results) =>
results.map(place =>
return new google.maps.Marker(
map: map,
position: place.geometry.location
);
);
);
);
);
// DISPLAY RESTAURANTS
function displayRestaurants()
console.log('display restaurants function');
;
export default googleMap;
【问题讨论】：
【参考方案1】：如果您想在第一个、中间和最后一个航路点进行餐厅搜索（似乎很有意义），那么您可以执行以下操作。
替换
directionsDisplay.setDirections(response);
response.routes[0].legs[0].steps.map(step =>
与
directionsDisplay.setDirections(response);
var steps = response.routes[0].legs[0].steps
// Using first, middle and last step - you would probably
// want to just use the waypoints as-is if there are fewer than 3
var lookup = steps.length > 2 ?
[steps[0], steps[Math.round(steps.length / 2)], steps[steps.length - 1]] :
steps
lookup.map(step =>
基本上不是将 placesService.nearbySearch 映射到每一步 - 只需将其映射到新数组中的第一步、中间步和最后一步。
编辑
解释这里发生了什么。
var steps = response.routes[0].legs[0].steps
var lookup = [steps[0], steps[Math.round(steps.length / 2)], steps[steps.length - 1]]
steps 是一个数组 - 这意味着您可以通过索引参数访问它的元素。
steps[0] 只是数组中的第一个元素（第一个路点）。
steps[Math.round(steps.length / 2)] 是 steps 数组中的中间元素 - 我们通过将总步数除以 2 得到 - 然后四舍五入以确保我们有一个整数而不是浮点数（即如果有奇数步数我们没有可以用作索引的数字）。
steps[steps.length - 1] 是 steps 数组中的最后一个元素，我们只需从 step 总数中取 1 就可以得到它（因为数组是零索引的）。
我们正在使用这三个值来构造一个新数组 lookup，然后将其映射到查找函数而不是 steps 数组。
这是一个通用示例，其中包含一些帮助说明。
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var b = [a[0], a[Math.round(a.length / 2)], a[a.length - 1]]
// a.length = 9
// a[0] = 1
// a[1] = 2
// ...
// a[5] = 6
// ...
// a[8] = 9
// a.length / 2 = 4.5 - as we can't do a[4.5] we need to round...
// Math.round(a.length / 2) = 5
// a.length - 1 = 8
// so b = [a[0], a[5], a[8]] or...
// [1, 6, 9]
【讨论】：
这绝对完美！惊人的！谢谢你！我只是想了解数学逻辑......所以你将点四舍五入到最接近的整数？然后除以 2。我不明白 [steps.length - 1] 的作用。我认为这与缩短数组中的元素有关吗？谢谢！ @ReenaVerma - 很高兴能提供帮助，通常在 *** 上说“谢谢”以获得好的答案，你会“投票” - 甚至更好地“接受答案” - 这可以让其他用户轻松找到好的答案.关于代码 - 请参阅我的编辑以清楚地了解它的作用。 这是一个精彩的解释，非常详细。我很感激你的努力！它真的帮助我理解了这个功能，我现在肯定会更舒服地使用它，将来会更频繁地使用它......谢谢你:)。我也接受了答案。弄清楚如何“投票”......我会用谷歌搜索这个哈哈哈，谢谢弗雷泽竖起大拇指......！Google Places API Autocomplete 仅获取城市列表
...Android应用程序上实现google的地点自动完成功能，它可以显示每个类似的地点，但是只有当用户尝试搜索任何内容时，我才能获得城市建议。我进行了很多搜索，但无法找到Android位置自动填充 查看详情
如何从 google.maps.places.Autocomplete 获得超过 5 个结果？
...400:22:20【问题描述】：在我的应用程序中，我在web视图中显示集成在html页面中的google.maps.places.Autocomplete视图。在上面输入时，我只得 查看详情
Google Places Autocomplete API“类型”参数仅适用于建立？
】GooglePlacesAutocompleteAPI“类型”参数仅适用于建立？【英文标题】：GooglePlacesAutocompleteAPI\'types\'parameteronlyworkswithestablishment?【发布时间】：2017-08-1323:58:15【问题描述】：我尝试在我的应用程序中使用GooglePlace的自动完成API，但在... 查看详情
如何将 Google Maps Places Library 的自动完成功能限制为仅推荐一个城市的地点？
】如何将GoogleMapsPlacesLibrary的自动完成功能限制为仅推荐一个城市的地点？【英文标题】：HowcanIrestricttheGoogleMapsPlacesLibrary\'sAutocompletetosuggestionsofonlyonecity\'splaces?【发布时间】：2012-05-2502:47:21【问题描述】：我目前正在使用给定... 查看详情
使用 Google Places API 获得 20 多个结果
...109:43:48【问题描述】：我想开发一个地图应用程序，它会显示给定地点附近的银行。我使用Places库进行搜索，每次它只返回20个结果。如果我想要更多结果该怎么办？【问题讨论】：【参考方案1】：更新：由于我最初编写了此答... 查看详情
指定航点时，Direction API 仅返回一条路线
】指定航点时，DirectionAPI仅返回一条路线【英文标题】：DirectionAPIreturnonlyoneroutewhenspecifywaypoints【发布时间】：2018-05-2417:41:05【问题描述】：我正在使用DirectionAPI来显示源和目的地之间的路线。我形成了这样的网址https://maps.google... 查看详情
反应：Google Places API/ Places 详细信息
...时间】：2017-12-3005:41:47【问题描述】：我有以下代码，它基于GooglePlacesAPI检索GooglePlaces评论。我已经将逻辑合并为React生命周期组件。目前，我无法设置状态并正确绑定对象。我可以使用一些帮助来了解我的逻辑失败的地方。expo... 查看详情
如何使用 React 和 Google Places API 在 Google 地图上显示地点标记？
】如何使用React和GooglePlacesAPI在Google地图上显示地点标记？【英文标题】：HowcanIuseReactwithGooglePlacesAPI,todisplayplacemarkersonaGooglemap?【发布时间】：2018-04-1706:31:10【问题描述】：我正在尝试构建与onAirbnb类似的地图，您可以在其中拖... 查看详情
Google Places API 自动完成未显示结果
】GooglePlacesAPI自动完成未显示结果【英文标题】：GooglePlacesAPIAutocompleteNotShowingResults【发布时间】：2018-01-1015:43:29【问题描述】：在我的React应用程序中。我正在使用GooglePlacesAPI自动完成功能，因此用户将能够输入他们的位置，... 查看详情
适用于 Android 的 Google Places API 未显示
】适用于Android的GooglePlacesAPI未显示【英文标题】：GooglePlacesAPIforAndroidnotshowing【发布时间】：2019-09-2420:11:47【问题描述】：我们无法在GoogleAPI服务列表中看到适用于Android的GooglePlacesAPI。我们正在将应用切换到新的google帐户，因... 查看详情
Google Places Android 显示错误“地点字段不得为空”？
】GooglePlacesAndroid显示错误“地点字段不得为空”？【英文标题】：GooglePlacesAndroidshowingerror"placefieldsmustnotbeempty"?【发布时间】：2020-12-1119:45:04【问题描述】：当我点击PlacesAuto完成片段搜索框时，我收到以下错误placefieldsmu... 查看详情
与 Uber 一样，在 ListView 中显示带有 Google Places 的 AutoCompleteTextView
】与Uber一样，在ListView中显示带有GooglePlaces的AutoCompleteTextView【英文标题】：AutoCompleteTextViewwithGooglePlacesshowninListViewjustlikeUber【发布时间】：2015-08-0118:19:37【问题描述】：我需要制作与此类似的屏幕。我认为它有autocompletetextview... 查看详情
使用 angular-google-places-autocomplete
...完成地点bowerinstallangular-google-places-autocomplete在控制台中显示错误Global`google`varmissing.Didyouforget 查看详情
在 Android 中，在列表中显示 Google Places JSON 数据？
】在Android中，在列表中显示GooglePlacesJSON数据？【英文标题】：InAndroid,displayGooglePlacesJSONdatainalist?【发布时间】：2012-07-2316:47:13【问题描述】：在下面的代码中，我可以显示从我的GooglePlacesURL中返回的第一个JSON地名结果。而不仅... 查看详情
Google Maps API [Directions API] 航点限制？
】GoogleMapsAPI[DirectionsAPI]航点限制？【英文标题】：GoogleMapsAPI[DirectionsAPI]Waypointslimitation?【发布时间】：2011-05-2401:31:10【问题描述】：Documentation表示航点限制为8个点。但是我必须用超过8个航点画一条线。该怎么做？【问题讨论... 查看详情
Google 地图 - Facebook Places 使用 JSON 的虚假位置
...SON【发布时间】：2011-07-1013:01:54【问题描述】：我正在对基于位置的社交网络进行一些研究，并试图通过修改google返回到Firefox浏览器的JSON来查看是否可以伪造位置。首先，我在firefox浏览器中输入about:config并设置好所有配 查看详情
Angular 2 + Google Maps Places Autocomplete，在输入后追加 [Dom 操作]
】Angular2+GoogleMapsPlacesAutocomplete，在输入后追加[Dom操作]【英文标题】：Angular2+GoogleMapsPlacesAutocomplete,appendafterInput[Dommanupulation]【发布时间】：2017-11-1318:24:08【问题描述】：我使用了“Angular2+GoogleMapsPlacesAutocomplete”搜索。它基本上... 查看详情
如何修复 flutter_google_places_autocomplete.dart 的错误？
...立一条通往它的路径。我想根据用户键入的内容在其下方显示地点和地址。显示结果后，我需要 查看详情