javascript - 加载半径内的标记

Question

我是 Google map 新手，我不知道如何开始在以 Initialize() 为中心的地址的给定半径周围获取标记

{
    <script type="text/javascript">
        var geocoder, infoBubble, geocode;
        var map;
        var marker;
        //var mgr;


        function initialize() {
            var minZoomLevel = 4;
            var zooms = 7;
            geocoder = new google.maps.Geocoder();
            geocode = new google.maps.Geocoder();

            // Used to Set the Center of the Maps on the Logged User
            $.getJSON('/Dashboard/LoadAddress', function Geocoding(address) {
                $.each(address, function () {
                    var currValAddress = this["AddressLine1"];
                    var Latitude = this["Latitude"];
                    var Longitude = this["Longitude"];
                    var LatLang = new google.maps.LatLng(Latitude, Longitude);

                    var addresse = {
                        zoom: 8,
                        center: LatLang,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById('map'), addresse);


                // Bounds for North America
                var strictBounds = new google.maps.LatLngBounds(
                      new google.maps.LatLng(15.70, -160.50),
                      new google.maps.LatLng(68.85, -55.90));

                // Listen for the dragend event
                google.maps.event.addListener(map, 'dragend', function () {
                    if (strictBounds.contains(map.getCenter())) return;
                    // We're out of bounds - Move the map back within the bounds

                    var c = map.getCenter(),
                      x = c.lng(),
                      y = c.lat(),
                      maxX = strictBounds.getNorthEast().lng(),
                      maxY = strictBounds.getNorthEast().lat(),
                      minX = strictBounds.getSouthWest().lng(),
                      minY = strictBounds.getSouthWest().lat();

                    if (x < minX) x = minX;
                    if (x > maxX) x = maxX;
                    if (y < minY) y = minY;
                    if (y > maxY) y = maxY;

                    map.setCenter(new google.maps.LatLng(y, x));
                });

                // Limit the zoom level
                google.maps.event.addListener(map, 'zoom_changed', function () {
                    if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
                });
            });
        });

        }

        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        function codeAddress() {
            infoBubble = new InfoBubble({
                map: map,
                shadowStyle: 0,
                padding: 10,
                borderRadius: 10,
                arrowSize: 15,
                maxWidth: 300,
                borderWidth: 1,
                borderColor: '#ccc',
                arrowPosition: 50,
                arrowStyle: 0
            });
            $.getJSON('/Dashboard/LoadWorkerList', function Geocode(addresses) {
                $.each(addresses, function () {
                    var currVal = this["AddressLine1"];
                    var Name = this["Name"];
                    var Gender = this["Gender"];
                    var Bdate = this["Birthdate"];
                    var ID = this["Worker_ID"];
                    var Latitude = this["Latitude"];
                    var Longitude = this["Longitude"];
                    var LatLang = new google.maps.LatLng(Latitude, Longitude);

                     marker = new google.maps.Marker({
                        map: map,
                        icon: iconBase + 'man.png',
                        position: LatLang,
                        title: currVal
                    })

                    var link = $('<a href="#">' + currVal + '</a>')
                         .data('location', LatLang);
                    $('#places').each(function () {
                        $('#places').append($('<li id=\'List\' class=\'List\'>').append(link));
                    });

                    link.on('click', function (event) {
                        event.preventDefault();
                        google.maps.event.trigger(addresses[0], "click");
                        infoBubble.removeTab(0);
                        infoBubble.addTab(Name, "Name: " + Name + "<br> Address: " + currVal + "<br> Gender: " + Gender + "<br> Birthdate: " + Bdate + "<br><br>" + '<center><a href="/Worker/WorkerDetails?workerId=' + ID + '">View Profile</a></center>');
                        infoBubble.open(map, marker);
                    });

                    google.maps.event.addListener(map, 'idle', function () {
                        $('#places > li').each(function () {
                            var inside = (map.getBounds().contains($(this).find('a').data('location'))) ? '' : 'none';
                            $(this).css('display', inside);
                        });
                    });



                    google.maps.event.addListener(marker, 'click', (function (marker, i) {
                        return function () {
                            infoBubble.removeTab(0);
                            infoBubble.addTab(Name, "Name: " + Name + "<br> Address: " + currVal + "<br> Gender: " + Gender + "<br> Birthdate: " + Bdate + "<br><br>" + '<center><a href="/Worker/WorkerDetails?workerId=' + ID + '">View Profile</a></center>');
                            infoBubble.open(map, marker);
                        }
                    })(marker, currVal));
                    addresses.push(marker);

                })
                google.maps.event.trigger(map, 'bounds_changed');
                google.maps.event.addListener(map, 'click', find_closest_marker);
            })
        }

        window.onload = function () {
            initialize();
            codeAddress();
        }

    </script>
}

现在我的问题是我是否添加以英里为单位的半径下拉列表。 。我怎样才能得到初始点到它周围的标记之间的距离。 。 .并且仅加载其半径内的标记，如本网站 here

Answer 1

基本原理是围绕点画一个圆。提取该圆的边界对象的 lat lng 坐标。将其传递到数据库以返回对象内的点，然后检查这些点是否在半径内(使用computeDistanceBetween)。

类似问题和相关答案(包括代码)可在以下位置找到:

Finding all the markers inside a given radius

How do I know if a Lat,Lng point is contained within a circle?

Google Maps - Finding all the markers inside a given radius Javascript/Php