希望你能帮助我。我的网站上出现了谷歌地图,使用的是 Angular JS 1。(虽然很多代码都是普通的 js)。
在我的 map 上,如果您搜索出发地和目的地,标记会下降并显示从出发地到目的地的谷歌路线。伟大的! :)
但是,我还编写了代码以使餐馆也出现在该结果中。然而,由于谷歌配额,餐厅在达到一定数量的路点(路线/路段/步数)后就会停止出现。
我想仅显示搜索结果中最多 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;
最佳答案
如果您想在第一个、中间和最后一个路径点进行餐厅搜索(似乎很有意义),那么您可以执行以下操作。
替换
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 => {
基本上,不是将 placeService.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)]
是步骤数组中的中间元素 - 我们通过将步骤总数除以 2 得到它 - 然后四舍五入以确保我们有一个整数而不是 float (也就是说,如果步骤数为奇数,我们将没有可以用作索引的数字)。
steps[steps.length - 1]
是steps数组中的最后一个元素,我们只需从总步数中取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]
关于javascript - 仅基于 2 个 WayPoint 显示 Google Places 搜索结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49367181/