2

我在三个选项卡中有一些内容（实际上是基础 css 部分）。每个选项卡都有不同城市的不同地图。我有三个不同的初始化函数，每个城市一个，称为 onclick。

<p class="title dublin-tab" data-section-title><a href="#panel2" onclick="initializeDublin();">

当我单击选项卡时，仅显示部分地图。我知道我需要打电话

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

但我的问题是在哪里调用它。

如果我再次单击选项卡上的地图加载没有问题。所以我试图用jquery强制第二次点击，但这仍然不起作用。

我已经看到很多人们遇到同样问题的问题，我已经尝试了几乎所有的问题，但仍然没有什么对我有用。

我该如何解决这个问题？

4

1 回答 1

0

我遇到过同样的问题。这是您仍在寻找的解决方案。

首先 - 您需要确保 google maps 变量是全局变量。只需删除“var”，所以初始化看起来像这样

maps = map = new google.maps.Map(document.getElementById("map"), myOptions);

其次 - 您需要一个调整地图大小并将其居中的功能。

function resizeGMap() 
{
    setTimeout(function()
    {
        google.maps.event.trigger(map, 'resize');
    map.setCenter( new google.maps.LatLng(55.378275,-3.435524) ); //uk
    }, 25);  //you have to give it a delay or else it will resize to the old width/height
}

最后 - 您需要在包含选项卡/部分名称的锚点上调用上述函数作为 onClick 事件。像这样：

<div class="section-container accordion" data-options="one_up: false;" data-section="accordion">
   <section>
      <p class="title" data-section-title><a href="#" onClick="resizeGMap();">Name of tab/section</a></p>
...

希望这可以帮助！

于 2013-09-12T16:57:08.703 回答