1

所以我在玩这个例子，我们公司有自己的谷歌地图 API 密钥。一位同事和我试图让地图工作 - 在全屏下，以下代码工作 - 我的意思是我们只是让地图缩放浏览器的整个宽度，我们使用的代码是：

<script>
    var map;

    function initialize() {
      var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map-canvas"></div>

显然它们不是 API 密钥，因为它是在其他地方加载的。

所以我决定添加这个，因为我需要存储在其他地方的地图 - 我添加了这个额外的爵士乐：

<style>
    #map-canvas {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    #Map{
        height: 350px;
    }
</style>

第一个很明显，第二个是 jquery-ui 选项卡的一部分，我基本上，对于这个选项卡，将它的高度设置为 350px

继续前进 - 问题是这样的：

在此处输入图像描述

如果我把一个人丢在路上，那么我会得到：

在此处输入图像描述

“近距离和个人”的跟踪者外观全宽和高度，但远处的方向图全都坏了....

有谁知道为什么？

4

3 回答 3

1

好点普雷文！即使我有同样的问题！您不必仅在调整 div 或窗口大小时调用它！在我的情况下，我在地图渲染后调用它。

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

现在我可以看到完整的渲染屏幕了！！

于 2013-12-31T09:20:35.647 回答
1

我也遇到了同样的问题，每当我调整 Google Maps 容器的大小时，我的一半地图都保持灰色（menas：不可用状态）。我通过触发refresh 像这样的谷歌地图事件来解决它

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

仅供参考： 每当您更改 Google 地图的高度或宽度时，最好触发此调整大小事件。

resize：当 div 改变大小时，开发者应该在地图上触发这个事件：google.maps.event.trigger(map, 'resize')。

你也可以在这里查看我的问题。

希望这能解决您的问题。

于 2013-09-04T06:58:03.183 回答
0

当 DOM 准备好时使用 setTimeout。这专门针对最初隐藏的地图（就像您在模式或弹出窗口中使用地图时一样）。

在 jQuery 中：

$(document).ready(function(){

setTimeout('initialize()', 2000);

});
于 2014-06-16T04:06:07.027 回答