网站上的谷歌地图，中心偏移

Google Maps on website, center is offset?

本文关键字：谷歌地图 网站      更新时间：2023-09-26

我想把我的地图居中在这里(谷歌地图网站)

我复制粘贴坐标在我的网站代码:

<script>
      function initialize() {
        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
          center: new google.maps.LatLng(56.4611388, -2.9719832),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(map_canvas, map_options)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
</script>

因为当用户将鼠标悬停在一些文本上时，我的地图会从页面顶部向下滑动，所以我在动画结束时调用了刷新地图的函数:

$('#map').mouseover(function() {
    if ($(this).offset().top == mapHiddenHeight) {
        $(this).animate({
            top: 0
        }, 500, function() {
            google.maps.event.trigger(map,'resize'); // refresh map
        }); 
    }
})

但地图与我网站上的中心略有偏移。(鼠标悬停在右上方"在地图上找到我们"时，地图会下拉)

NB:实际上我刚刚注意到，如果我清除浏览器缓存并加载网站，它会出现在正确的位置。当你在缓存满的情况下重新加载页面时，它会不断显示相同的位置偏移量。不管之后你刷新了多少次页面。因此，它只显示在正确的位置与已清除的缓存，这当然是恼人的。

我甚至不知道从哪里开始调试这个。

基本上没有什么要"调试"的，这可能听起来很有趣，但当有一些东西可能被称为"bug"时，它是你得到的位置，当它按预期工作。

当你触发resize事件时，API会重新计算地图的大小，以便能够加载缺失的贴图。API不会根据当前的中心/大小重新居中(隐藏地图的中心通常是在西北角的位置)。

你必须自己把地图重新居中。

有两个选项:

  1. 总是在地图的中心位置:

    1. 将所需的中心存储为地图选项:

      var map_options = {
 center: new google.maps.LatLng(56.4611388, -2.9719832),
 zoom: 18,
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 //default-center, should have same value as center
 originalCenter:new google.maps.LatLng(56.4611388, -2.9719832)
}

    2. 在$.animate -callback中首先触发resize-event，然后设置地图的中心:

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

  2. 在调整大小之前将地图居中(当用户拖动地图时，该位置将恢复):在$.animate内部-callback:

       var center=map.get('center');
   google.maps.event.trigger(map,'resize');
   map.setCenter(center);
相关文章：