Question

谷歌地图在我的测试页面中正确初始化但在我的网站上没有正确显示（满载）。地图没有显示100％宽度，只是部分加载。谷歌搜索后我发现DOM没有正确加载但是当我点击萤火虫时显示完整的图像。我无法理解它为什么会发生。虽然我用过

google.maps.event.trigger（map，'resize'）;

但没有找到欲望的结果。我的代码

> <script>
> 
> var geocoder; var map; var marker; var marker2; var  marker3; 
> var infowindow = new google.maps.InfoWindow(); 
>
> function initialize() {  
> geocoder = new google.maps.Geocoder();   
>
> var latlng = new  google.maps.LatLng(51.5167,9.9167);   
>
> var mapOptions = {
>     zoom: 5,
>     center: latlng,   
>     zoomControl: true,    
>      mapTypeId: google.maps.MapTypeId.ROADMAP,    
>     zoomControlOptions: {
>                  style: google.maps.ZoomControlStyle.LARGE,
>                  position: google.maps.ControlPosition.TOP_left
>              }   
>       }
>      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
>      google.maps.event.trigger(map, 'resize');   
<!--click  event-->  
> google.maps.event.addListener(map, 'click', function(event)
> {
>     
>   geocoder.geocode({'latLng': event.latLng}, function(results, status) 
>       {if (status == google.maps.GeocoderStatus.OK) {
>             if (results[0]) {
>               
>               if(marker3)
>               {  
>                 //alert(results[0].geometry.location);
>                 //alert(event.latLng);
>                 marker3.setPosition(event.latLng); 
>               }
>               else{
>               marker3 = new google.maps.Marker({
>                   position: event.latLng,
>                   map: map,
>                   draggable: true
>               });
>               }
>               infowindow.setContent(results[0].formatted_address);
>               infowindow.open(map, marker3);
>                
>               //alert(results[1].formatted_address);
>               //alert(results[0].formatted_address);
>             } else {
>               alert('No results found');
>             }             } else {
>             alert('Geocoder failed due to: ' + status);           }
>         });
>   
>   
>      });    <!--click event-->    }); }
> 
> google.maps.event.addDomListener(window, 'load', initialize); $(
> document ).bind( "pageshow", function( event, data ){
> google.maps.event.trigger(map, 'resize'); });




<div class="create-a-tour-map1" id="map-canvas" style="float:right;
 width:317px; height:296px;;margin: 0.6em;"></div>

Answer 1

您可能只需在活动活页夹中将“pageshow”更改为“加载”或“就绪”。

 google.maps.event.addDomListener(window, 'load', initialize); 
 $(document).bind( "load", function( event, data ){
    google.maps.event.trigger(map, 'resize'); 
 });

但我个人会用这个：

$(window).load(function(){ 
  initialize();
  google.maps.event.trigger(map, 'resize'); 
});

这将在'onLoad'事件上注册一个事件监听器，该事件在被触发时首先执行initialize（）然后在该触发器上调整地图上的大小。你的代码的问题是'pageShow'在窗口的onLoad事件之前被触发，所以它触发了在不存在的地图上调整大小。打开firebug可能会触发'pageShow'事件，导致地图调整大小。总之，不要使用'pageShow'，它不支持浏览器（在此处阅读：pageShow event in javascript）

谷歌地图没有正确初始化和调整大小

1 个答案: