在谷歌地圖中，​​邊界始終返回相同的座標

Question

我試圖在地圖上放置標記，並在用戶移動地圖時重新加載標記，但我遇到的問題很少。

• 當我試圖讓bounds.getNorthEast(); & bounds.getSouthWest();首先，我得到了相同的緯度/經度，我不明白爲什麼。
• 其次，當我移動地圖的bounds.getNorthEast(); & 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); 
       } 
      }); 
     }); 
    }