Question

我正在编写可以做这件事的JS应用程序

找到我的位置（我这样做了）找到指定的ATM（我没想到如何找到我的半径）列出所有找到的ATM并按距离对其进行排序

为此，我需要rankBy，但我不知道如何使用它。我在互联网上看，几乎所有人都谈到这一点，但没有人不展示如何使用。

是否有人可以帮助mi设置我的半径并在该半径内显示ATM并按距离对它们进行排序？

这是代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Marker Animations</title>
    <style>
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
            height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>


    function initMap() {
        var map, infoWindow,service,infoWindow1;
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 12
        });
        infoWindow = new google.maps.InfoWindow;

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };


                infoWindow.open(map);
                map.setCenter(pos);
                var marker = new google.maps.Marker({
                    map: map,
                    position: pos,
                    draggable: true,
                    animation: google.maps.Animation.DROP,
                });
                marker.addListener('click', toggleBounce);

                function toggleBounce() {
                    if (marker.getAnimation() !== null) {
                        marker.setAnimation(null);
                    } else {
                        marker.setAnimation(google.maps.Animation.BOUNCE);
                    }
                }
            }, function () {
                handleLocationError(true, infoWindow, map.getCenter());
            });
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }


        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                'Error: The Geolocation service failed.' :
                'Error: Your browser doesn\'t support geolocation.');
            infoWindow.open(map);
        }

        infoWindow1 = new google.maps.InfoWindow;
        service = new google.maps.places.PlacesService(map);
        map.addListener('idle', performSearch);

        function performSearch() {
            var request = {
                bounds: map.getBounds(),
                keyword: 'telenor atm',

            };
            service.radarSearch(request, callback);
        }

        function callback(results, status) {
            if (status !== google.maps.places.PlacesServiceStatus.OK) {
                console.error(status);
                return;
            }
            for (var i = 0, result; result = results[i]; i++) {
                addMarker(result);
            }
        }

        function addMarker(place) {
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location,
                icon: {
                    url: 'https://developers.google.com/maps/documentation/javascript/images/circle.png',
                    anchor: new google.maps.Point(10, 10),
                    scaledSize: new google.maps.Size(30, 37)
                }
            });
            google.maps.event.addListener(marker, 'click', function () {
                service.getDetails(place, function (result, status) {
                    if (status !== google.maps.places.PlacesServiceStatus.OK) {
                        console.error(status);
                        return;
                    }
                    infoWindow1.setContent(result.name);
                    infoWindow1.open(map,marker);
                });
            });
        }
    }


</script>


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCW8gRR1ITJDx4F-rVpkBSetftu32XO2P0&callback=initMap&libraries=places,visualization" async defer></script>

</body>
</html>

Google Places API排名

0 个答案: