Javascript 仅基于2个航路点显示Google PlacesSearch结果

希望你能帮我。我的网站上出现了谷歌地图，使用的是AngularJS1。不过，很多代码都是普通的js

在我的地图上，如果你搜索一个起点和目的地，标记会下降并显示从起点到目的地的谷歌路线。太好了

但是，我也编写了代码，使餐馆也出现在这个结果中。然而，由于谷歌的配额，餐馆在经过一定数量的航路点路线/航段/台阶后就不再出现了

由于配额/API限制，我只想显示搜索结果中最多3个航路点的餐馆结果

我该怎么做

这是我的指令代码

/* 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 => {

与

基本上，不需要将placesService.nearby映射到每个步骤，只需将其映射到新数组中的第一个、中间和最后一个步骤即可

编辑

来解释这里发生了什么

var steps = response.routes[0].legs[0].steps
var lookup = [steps[0], steps[Math.round(steps.length / 2)], steps[steps.length - 1]]

steps是一个数组-这意味着您可以通过索引参数访问其元素

步骤[0]只是数组中的第一个元素，即第一个路径点

steps[Math.roundsteps.length/2]是steps数组中的中间元素-我们通过将总步数除以2得到它-然后舍入以确保我们有一个整数，而不是一个浮点，如果有奇数步数，我们就没有一个可以用作索引的数字

步骤[steps.length-1]是步骤数组中的最后一个元素，我们只需从步骤总数中取1，因为数组的索引为零

我们使用这三个值来构造一个新的数组查找，然后将其映射到查找函数而不是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-很乐意提供帮助，通常在stackoverflow上表示感谢，感谢您提供了一个好的答案，您可以投票表决，或者更好地接受这个答案-这让其他用户可以轻松找到好的答案。关于代码-请参阅我的编辑，以清楚的术语对它的功能进行完整的解释。这是一个很好的解释，非常详细。我感谢你的努力！它真的帮助我理解了这个函数，我现在肯定会更舒服地使用它，将来更频繁地使用它。。。谢谢。我也接受了答案。想知道如何“向上投票”。。。我会谷歌这个哈哈哈，谢谢你弗雷泽竖起大拇指。。。！

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]