Question

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

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

当我点击标签时，只显示地图的一部分。我知道我需要打电话

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

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

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

我已经看到很多问题，人们遇到了同样的问题，我几乎尝试了所有这些问题，但对我来说仍然无效。

我该如何解决这个问题？

Answer 1

我有同样的问题。如果你还在寻找，这是解决方案。

首先 - 你需要确保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>
...

希望这有帮助！

Google地图调整了基础CSS部分的问题

1 个答案: