Google Maps API - 奇怪的地图“偏移”行为

Posted 2023-02-23

【中文标题】Google Maps API - 奇怪的地图“偏移”行为

【英文标题】：Google Maps API - Strange Map "Offset" Behaviour

【发布时间】：2011-06-06 13:45:18

【问题描述】：

我正在网页上的表单旁边添加地图。这个想法是人们可以注册，当他们输入他们的地址并点击搜索时，它会标记他们的房子，他们必须在提交表单之前这样做（地理定位在我的网站上扮演着重要角色）。

不幸的是，我添加了地图，但在地图窗口中，地图本身似乎是偏移的。请参阅下图以说明我的意思：

我只能从框的“映射”部分中拖动地图。如果我选择灰色区域来拖动地图，它会失败。

有什么可能导致这种情况的想法吗？

编辑：

这是我的地图初始化 javascript，在页面加载时调用。

    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(52.428385,-3.560257);
    var myOptions = 
      zoom: 7,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    
    map = new google.maps.Map(document.getElementById("adminMap"), myOptions);

这是我的地图 CSS

#adminMap
    float:left;
    width:270px;
    height:370px;
    margin-left:20px; 

这是我的地图 html

<div id="adminMap">
</div>

【参考方案1】：

要在更改 div 可见性时再次完全渲染地图，您可以使用此代码。

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

这将在 div 中重新渲染您的地图并完全显示它。

【参考方案2】：

我见过类似的事情。如果无法访问任何代码，我最好的选择是在隐藏容器 div 时初始化地图。我已经看到导致这样的症状。尝试在显示地图时设置地图，而不是之前设置。

【讨论】：

公平竞争，你用那个一针见血！我将初始化程序从身体负载更改为 div 本身被激活时。干杯队友

刚刚遇到完全相同的问题，您的回答已解决 - 谢谢！

你刚刚拯救了我的一天。一个可怕的到现在：D 浪费了太多的时间：D

优秀。你刚刚让我免于花费数小时陷入一个复杂的 JavaScript 回调混乱 :)