Question

我是谷歌地图的新手，我对如何开始在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>
}

现在我的问题是，如果我以英里为单位添加一个Radius of Radius。。如何获得初始点与周围标记之间的距离。。。并且只加载其半径内的标记，如此网站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

在Radius中加载标记

1 个答案: