Question

在我的网站上，我的地图被切断了。但我不知道为什么。我仍然可以互动但只是在有限的意义上。任何人都可以看看并给我一些见解吗？

这是该网站 http://people.rit.edu/~ctn9382/536/assignment3/

为了到达地图，您必须单击“显示结果”，然后单击医院的名称，它应该在页面顶部创建一堆东西。

Answer 1

每当用户切换到“位置”选项卡时，通过触发此处强制调整大小事件：

google.maps.event.trigger(map, 'resize');

由于您在隐藏div时初始化地图，因此无法确定自己有多大，所以您需要强制它再次检查大小。这也是为什么当你打开开发人员控制台时它会修复自己，就像Daan注意到的那样，因为它调整了触发调整大小事件的窗口的大小。

Answer 2

我这样做了：

var map;
function initialize() {
var pos = new google.maps.LatLng(<%=@listing.lat%>, <%=@listing.lng%>);
var mapOptions = {
  zoom: 15,
  center: pos,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById('listing_map'),
    mapOptions);
var marker = new google.maps.Marker({
    position: pos,
    map: map
});
google.maps.event.trigger(map, 'resize');
}

现在当你切换标签时，使用setTimeout来延迟地图初始化：

<a href="" onclick="setTimeout(function(){ initialize() }, 100);">

Answer 3

在我看来，地图小程序尚未被“告知”填充容器。没有代码示例我无法提供具体的更改，但我建议您查看地图小程序的CSS样式。您可能需要将宽度和高度设置为特定大小（容器的宽度和高度），或者可能只是告诉它占用100％的可用空间。

祝你好运。

Answer 4

有同样的问题，虽然感谢一些有用的人在论坛上解决了这个问题。

Solved my issue.

谷歌地图API地图在那里，但切断

4 个答案: