Question

好的，我已经搜索了高低，以寻求解决方案。我发现的一切都不太合适。对于使用jquery选项卡未出现在隐藏div中的Google地图，这是一个类似的问题。但是，当导航到另一个选项卡并返回Chrome，Firefox，Opera和Safari时，我正确地加载了正确加载并保持缩放的地图。

所以我常常的问题是IE。

我设置它的方法是最初隐藏div然后显示它并加载到iframe中的地图代码。正如我所说，除了IE之外，它在左侧角落加载地图而没有调整大小的能力。我假设这与IE处理javascript的方式有关。我已经在这里尝试过大量的建议但是IE中的所有建议都失败了，所以想知道是否有人之前遇到过此问题并且是否有可用的解决方法。

以下代码是初始化地图。对函数的调用是关闭html标记之后页面中的最后一件事。

当按下ui.tab以更改显示的div面板时，此页面将通过iframe加载到div标签中。

任何线索或提示都是最受欢迎的。

function initialize() {
  var myLatlng = new google.maps.LatLng(50.66416319854267,-1.1316803097724914);

  var myOptions = {
     zoom: 10,
     center: myLatlng,
     mapTypeId: google.maps.MapTypeId.SATELLITE
     }
 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

  var marker = new google.maps.Marker({
  draggable: false,
  position: myLatlng, 
  map: map,
  icon: '../images/yellow-pin.png',
  title: ""
  });
  google.maps.event.trigger(map, 'resize'); // added from another forum post does not work
}

Answer 1

这是典型的隐藏“左上角”问题。

您是否尝试过使用onload函数来运行初始化函数？

问题是iframe中的javascript代码（触发器“resize”）正在加载页面时执行，而不是在显示时执行。当它被加载时，div的大小为零。在div被显示并具有大小后，您需要在地图上触发调整大小功能。

Google Maps API v3无法在IE中隐藏div中使用iframe正确加载，但在所有其他浏览器中完全加载

1 个答案: