Question

我有一个问题集中在我在网站上的谷歌地图的标记。

地图位于javascript标签中，并在激活标签后触发调整大小，以便重新加载并显示，因此：

<li>
                <a href="#" class="button tablinks" onclick="openTab(event, 'contact');resetMap();"><span class="topnavlinks">Contact</span></a>
            </li>

function resetMap() {
google.maps.event.trigger(map, 'resize');
}

它会重置为大小，但就像我在无数个地方读过它一样，它不会重置以使标记居中。我尝试过各种答案，但我仍然无法找到解决这个问题的方法！

我的标签代码：

<script><!-- tabs -->
  function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
  }
  document.getElementById("defaultOpen").click();
</script>

我的地图代码（只是没有样式）：

function initMap() {
  var theoneway = {lat: 9.700082, lng: 100.02203};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: theoneway
  });
  var marker = new google.maps.Marker({
    position: theoneway,
    map: map
  });
}

最后是html：

<div class="container-fluid">
    <div id="map" style="height:500px;"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=(mykeyishere)&callback=initMap"
    async defer></script>
</div>

可在此处找到工作版本：http://theoneway.asia/bench/

我希望有足够的信息，我非常感谢任何帮助和建议！

Answer 1

我已经在地图js文件中使用listen事件修复此问题，以防其他人遇到同样的问题：

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});

使用javascript选项卡调整大小后的中心标记

1 个答案: