谷歌地圖面板沒有像預期的那樣令人耳目一新

Question

我目前有一個與我的谷歌地圖實施問題，我希望我能從S.O.獲得一些幫助。谷歌地圖社區。

當前我正在創建一張地圖，添加一堆標記，然後將地圖放入標記邊界。但是，當地圖顯示時，map.fitBounds（邊界）只更新了一半地圖。

我不知道如何解決這一點。我以前從未見過地圖部分縮放。

在此先感謝所有提交回復的人！

下面是代碼來創建地圖：

<script> 
    var markersData = [ 
     @if(count($properties) > 0) 

      @foreach($properties as $property) 

       @if($property->lat == 0 && $property->lng == 0) 
        // Don't add the marker 
       @else 
        { 
         lat: "{{ $property->lat }}", 
         lng: "{{ $property->lng }}", 
         address: "{{ $property->street }}", 
         citystatezip: "{{ $property->city.', '.$property->state.' '.$property->zip }}" 
        }, 
       @endif 

      @endforeach 

     @endif 
    ]; 

    function displayMarkers(){ 

     if(markersData.length > 0){ 
      var bounds = new google.maps.LatLngBounds(); 
      for (var i = 0; i < markersData.length; i++){ 

       var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng); 
       var address = markersData[i].address; 
       var citystatezip = markersData[i].citystatezip; 

       createMarker(latlng, address, citystatezip); 

       bounds.extend(latlng); 
      } 

      // JUST ADDED THIS CODE AND ITS WORKING NOW 
      google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) { 
       this.setZoom(map.getZoom()-1); 

       if (this.getZoom() > 15) { 
        this.setZoom(15); 
       } 
      }); 

      map.fitBounds(bounds); 

     }else{ 
      var center = new google.maps.LatLng("{{$county->lat}}", "{{ $county->lng }}"); 
      map.panTo(center); 
     } 

    } 

    function createMarker(latlng, address, citystatezip){ 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: latlng, 
      title: address, 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 

       var iwContent = '<div id="iw_container">' + 
         '<div class="iw_title">' + address + '</div>' + 
         '<div class="iw_content">' + citystatezip + '</div></div>'; 

      infoWindow.setContent(iwContent); 

      infoWindow.open(map, marker); 
     }); 
    } 

    function initialize() { 

     var mapOptions = { 
      zoom: 9, 
      mapTypeId: 'roadmap', 
      scrollwheel: false 
     }; 

     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     infoWindow = new google.maps.InfoWindow(); 

     google.maps.event.addListener(map, 'click', function() { 
      infoWindow.close(); 
     }); 

     displayMarkers(); 

    } 
    google.maps.event.addDomListener(window, 'load', initialize); 


</script> 

Answer 1

好的，我通過在S.O.上搜索更多的東西來了解它。

我加入這個代碼的代碼添加標記的部分（見上面的代碼 - 我更新了我的示例程序中包含這一新的片段）

google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) { 
      this.setZoom(map.getZoom()-1); 

      if (this.getZoom() > 15) { 
       this.setZoom(15); 
      } 
     }); 

由於這個職位上的SO： How to ensure that google map is loaded?

Answer 2

功能initMap（）{ 地圖=新google.maps.Map（的document.getElementById（ '地圖'），{ 變焦：2， center：new google.maps.LatLng（4，-8）， mapTypeId：'terrain' }）;

由於地圖先呈現，縮放可能會這樣做。