谷歌地图显示只有一个第四部分在左边

嘿即时通讯工作在谷歌MAP ..我已经实现谷歌地图通过使用谷歌地图冰，但是当页面刷新地图只显示在div容器的左上角，即显示只有div容器的第四部分，而另一部分是空白的。但是当我按F12检查代码（Firebug）时，它将完全显示。我不明白这是怎么回事...谷歌地图显示只有一个第四部分在左边

<div id="dvMap" > 
     </div> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api /js?sensor=false"> 

</script> 
<script type="text/javascript"> 
var map; 
var markers = [ 
     <asp:Repeater ID="rptMarkers" runat="server" > 
     <ItemTemplate> 
       { 
         // "title": '<%#Regex.Replace(Eval("HotelNamelabel").ToString(),"/\\W\\d\\S\\[\\w'-]/",string.Empty) %>', 
         "lat": '<%# Eval("Latitude") %>', 
         "lng": '<%# Eval("Longitude") %>', 
         // "description": '<%#Regex.Replace(String.Format("{0} , {1} , {2}",Eval("HotelNamelabel"),Eval("HotelLocation"),Eval("HotelCity")),"/\\W\\d\\S\\[\\w'-]/",string.Empty) %>' 

        } 

     </ItemTemplate> 
     <SeparatorTemplate> 
      , 
      </SeparatorTemplate> 
      </asp:Repeater> 
    ]; 


    window.onload = function() { 
     var mapOptions = { 
       center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
       zoom: 8, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var infoWindow = new google.maps.InfoWindow(); 
      var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 
      google.maps.event.addDomListener(map, 'resize', function(){ 
       alert('div resize'); 
       google.maps.event.trigger(map,'resize'); 
      }); 

      for (i = 0; i < markers.length; i++) { 
       var data = markers[i] 
       var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
       var marker = new google.maps.Marker({ 
        position: myLatlng, 
        map: map, 
        title: data.title 
       }); 
       (function (marker, data) { 
        google.maps.event.addListener(marker, "click", function (e) { 
         infoWindow.setContent(data.description); 
         infoWindow.open(map, marker); 
        }); 
       })(marker, data); 
      } 


    }

来源

2013-04-29 Rahul jain

您描述的症状通常发生在Google地图在隐藏画布上初始化时发生。所以当'var map = new google.maps.Map（...）'被调用时，确保画布完全呈现并可见。 – 2013-04-29 10:12:49

扩大在什么甜菜根在他的评论中说，你可以通过使用克服这个问题下面：

$(function() { 
    $('#yourMapContainer').on('shown', function() { 
     google.maps.event.trigger(map, "resize"); 
    }); 
});

如果确实地图是在隐藏的元素（如模式窗口），请将此调用放在单独的JS文件中，即您的主站点JS文件。

来源

2013-04-29 12:33:01 MattSull

其不工作... – 2013-04-29 12:54:57

它应该工作。我有同样的问题。你能否用更多的信息来更新你的Q - 地图是否在一个隐藏的画布上呈现，即模态窗口？您确定您对JS文件所做的更改已被识别，即文件的旧版本未在浏览器中缓存吗？ – MattSull 2013-04-29 13:01:08

我可以知道，我如何访问地图在saperate js文件中google.map.event.trigger（），其中我如何访问地图 – 2013-04-29 13:16:57

谷歌地图显示只有一个第四部分在左边

回答

相关问题