Question

我在使用Google Maps API时遇到了问题。我正在使用V3 API和fancybox在类似灯箱的div中显示地图。当我第一次点击链接时，fancybox也会打开并映射加载。一切似乎都没问题，但当我关闭fancybox并尝试重新打开时，地图加载错误。它只加载了大约一半的面积。在第二次打开时创建的地图对象可能有问题。当我每次想要获得正确的地图时我正在重新加载页面时，没关系......当我尝试打开 - 关闭 - 打开 - 关闭等时出现问题。有人知道我应该怎么做吗？我喜欢fancybox，但现在我完全搞砸了:)底部是我的代码的一些部分。谢谢

$(document).ready(function () {
  $("a.maps").fancybox({
    'overlayOpacity ': 0.5,
    'transitionIn': 'fade',
    'transitionOut': 'fade',
    'type': 'ajax'
  });
});

FANCYBOX的这个内容。链接是从简单的呼叫中呼叫的......“

function initialize() {
  var myLatlng = new google.maps.LatLng(49.095354, 17.749553);
  var myOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: "DAMN"
  });
}

function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map_canvas");

  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '100%';
  } else {
    mapdiv.style.width = '400px';
    mapdiv.style.height = '400px';
  }
}
initialize();
detectBrowser();
</script>
<div id="mapaOkolo">
<div id="map_canvas"></div>
</div>

Answer 1

我自己遇到这个问题并提出了解决方法：

google.maps.event.addListener(<map object>, 'tilesloaded', function() {
    google.maps.event.trigger(<map object>, 'resize');
    <map object>.setCenter(<LatLng>);
});

地图偏离中心，所以它也需要居中。

Answer 2

这是一个非常常见的问题请查看here。尝试使用google.maps.event.trigger(map, "resize");

希望这有帮助

谷歌在Fancybox中映射错误显示重新打开

2 个答案: