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

Posted 2023-03-14

【中文标题】仅基于 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 - 很高兴能提供帮助，通常在 *** 上说“谢谢”以获得好的答案，你会“投票” - 甚至更好地“接受答案” - 这可以让其他用户轻松找到好的答案.关于代码 - 请参阅我的编辑以清楚地了解它的作用。

这是一个精彩的解释，非常详细。我很感激你的努力！它真的帮助我理解了这个功能，我现在肯定会更舒服地使用它，将来会更频繁地使用它......谢谢你:)。我也接受了答案。弄清楚如何“投票”......我会用谷歌搜索这个哈哈哈，谢谢弗雷泽竖起大拇指......！