谷歌地图面板没有像预期的那样令人耳目一新

-1

我目前有一个与我的谷歌地图实施问题，我希望我能从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>

来源

2017-04-18 ProfessorGT

请提供一个演示此问题的[mcve]。 – geocodezip

这与由于此问题尚未投入生产的功能有关，因此我无法提供网址。 – ProfessorGT

提供必要的代码来重现问题，而不是链接。 – MrUpsidown

好的，我通过在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?

来源

2017-04-18 21:28:42 ProfessorGT

-1

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

由于地图先呈现，缩放可能会这样做。

来源

2017-04-18 18:09:16

那么，你打算在我打电话给fitBounds后重新设置地图选项吗？ – ProfessorGT

自从我使用地图以来，它已经有一段时间了，但我记得我必须在ajax调用之后进行刷新，因为地图呈现方式不同。这是我找到信息的地方：https：//developers.google.com/maps/documentation/javascript/tutorial –

这没有奏效。感谢您尝试协助。 – ProfessorGT

谷歌地图面板没有像预期的那样令人耳目一新

回答

相关问题