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 回答