在谷歌地图中，​​边界始终返回相同的坐标

Question

我正在尝试将标记放在地图上并在用户移动地图时重新加载标记，但我几乎没有问题。

• 首先，当我想要bounds.getNorthEast();＆amp; bounds.getSouthWest();，我得到相同的纬度/经度，我不明白为什么。
• 其次，当我移动地图bounds.getNorthEast();＆amp; bounds.getSouthWest();总是返回相同的内容

这是我的代码：

    $( document ).ready(function() {
        function initialize() {
            var bounds = new google.maps.LatLngBounds();
            var latLng = new google.maps.LatLng(33.76, -84.39);
            var myMapOptions = {
                sensor: true,
                mapTypeControl: true,
                zoom: 14,
                center: new google.maps.LatLng(33.76, -84.39),
                rotateControlOptions: false,
                panControl: false,
                scrollwheel: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infowindow = new google.maps.InfoWindow({
                disableAutoPan : false,
            });
            var map = new google.maps.Map(document.getElementById('map_newsfeed'), myMapOptions);
            bounds.extend(latLng);
            google.maps.event.addListener(map, 'idle', function(ev){
                var ne = bounds.getNorthEast();
                var sw = bounds.getSouthWest();
                debugger
                $.ajax({
                    url: '/api/v1/building_permits/geo_bbox/'+ne.e+','+ne.d+'/'+sw.e+','+sw.d,
                    success: function (json) {
                        for (var i = 0; i < json.length; ++i) {
                            debugger
                            var latLng = new google.maps.LatLng(json[i].latitude, json[i].longitude);
                            bounds.extend(latLng);
                            var marker = new google.maps.Marker({position: latLng});
                            attachInfoWindows(marker, map, infowindow, json[i].latitude, json[i].longitude)
                            map.fitBounds(bounds);
                        }
                    }
                });
            });
        }
        function attachInfoWindows(marker, map, infowindow, lat, lng) {
            google.maps.event.addListener(marker, 'click', function() {
                var lat1 = lat, lng2 = lng;
                $.ajax({
                    url: '/api/v1/building_permits/'+lat1+'/'+lng2,
                    async: false,
                    success: function (json) {
                        infowindow.setContent(json);
                        infowindow.open(marker.get('map'), marker); 
                        //map.panTo(marker.getPosition());
                    }
                });
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    });

Answer 1

您在AJAX请求中想要的边界是google.maps.Map对象的边界。为此：

 bounds = map.getBounds();

但是，当您第一次初始化地图时，它将无法使用，在第一个'bounds_changed'事件触发时获取它：

    function initialize() {
        var bounds = new google.maps.LatLngBounds();
        var latLng = new google.maps.LatLng(33.76, -84.39);
        var myMapOptions = {
            sensor: true,
            mapTypeControl: true,
            zoom: 14,
            center: new google.maps.LatLng(33.76, -84.39),
            rotateControlOptions: false,
            panControl: false,
            scrollwheel: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infowindow = new google.maps.InfoWindow({
            disableAutoPan : false,
        });
        var map = new google.maps.Map(document.getElementById('map_newsfeed'), myMapOptions);
        google.maps.addListenerOnce(map, 'bounds_changed', function() {
            var bounds = map.getBounds();
            var ne = bounds.getNorthEast();
            var sw = bounds.getSouthWest();

            $.ajax({
                url: '/api/v1/building_permits/geo_bbox/'+ne.e+','+ne.d+'/'+sw.e+','+sw.d,
                success: function (json) {
                    // now make an empty bounds to determine the new viewport
                    var bounds =  new google.maps.LatLngBounds();
                    for (var i = 0; i < json.length; ++i) {
                        var latLng = new google.maps.LatLng(json[i].latitude, json[i].longitude);
                        bounds.extend(latLng);
                        var marker = new google.maps.Marker({position: latLng});
                        attachInfoWindows(marker, map, infowindow, json[i].latitude, json[i].longitude)
                    }
                    // only fit the bounds when all the markers have been added.
                    map.fitBounds(bounds);
                }
            });
        });
    }