Question

我目前的谷歌地图实施存在问题，我希望能从S.O.获得一些帮助。谷歌地图社区。

目前我正在创建一个地图，添加一堆标记，然后将地图拟合到标记的边界。但是，当显示地图时，map.fitBounds（bounds）只更新了地图的一半。

我不知道如何解决这个问题。我以前从来没有见过像这样的地图部分缩放。

提前感谢所有提交回复的人！

以下是创建地图的代码：

 <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

function initMap（）{ map = new google.maps.Map（document.getElementById（＆＃39; map＆＃39;），{ zoom：2， center：new google.maps.LatLng（4，-8）， mapTypeId：＆＃39; terrain＆＃39; }）;

由于地图首先呈现，缩放可能正在进行。

Google地图面板未按预期刷新

2 个答案: