我们能否知道Google地图是否已初始化？

Question

假设我们使用一些代码初始化地图：

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

有没有一种简单的方法来确定页面上的特定地图是否已初始化（在这种情况下，地图位于id =“map-canvas-0”）？

我可以想一些使用隐藏字段的方法，但我希望有一种更简单的方法。

Answer 1

我认为这里真正的问题是“在你的页面上，对于地图的初始化是什么意思？”

在评论中，您提到您可能在页面上有大约200张地图。 当然，你并不是说你为这200张地图中的每张地图调用了new google.maps.Map() ？ 这似乎是一个非常慢的加载页面。

实际上你有200个容器<div>元素，其中一些元素可能已经使用new google.maps.Map()初始化了一个地图，就像你的initialize()函数一样，其中一些尚未初始化那个代码，但只是空<div>元素，直到你这样做？

您真正感兴趣的不是特定地图是否已完全加载，而是您是否已开始加载它？

例如，您可以在一个页面上单击一个框，然后开始加载地图。 地图开始加载后，您不希望在第二次单击时重新加载它。 你对这种情况感兴趣的不是地图是否已经完全加载，而是它是否已经开始加载。

如果这就是你正在做的事情，那么测试它的一个简单方法是查看<div>元素是否有任何子元素：

function hasMap( id ) {
    return !! document.getElementById(id).firstChild;
}

if( hasMap("map-canvas-0") ) {
    // That map has loaded or at least has started loading
}

如果您需要确定地图是否已完全加载，那么idle事件就是这样做的方法。 在那一点上，使用隐藏字段或JavaScript对象真的是一个折腾。 JavaScript对象非常简单：

var mapsLoaded = {};

function loadMap( id, lat, lng, zoom ) {
    var options = {
        center: new google.maps.LatLng( lat, lng ),
        zoom: zoom,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var container = document.getElementById( id );
    var map = new google.maps.Map( container, options );
    google.maps.event.addListener( map, 'idle' function() {
        mapsLoaded[id] = true;
    });
}

现在，如果您想知道是否加载了特定ID的地图，只需使用：

mapsLoaded[id]

例如

mapsLoaded['map-canvas-0']

将告诉您示例中的地图是否已完全加载。

如果这个答案似乎偏离基础，如何更充分地解释你在做什么？ 什么时候创建容器元素 - 所有在页面初始化时或之后？ 何时以及如何创建地图？ 在用户点击或什么？ 如何生成容器ID？ 您需要知道地图是否已创建的情况是什么时候 - 您何时需要知道这个以及为什么？

你可以越清楚地指出这类问题，就越有可能有人可以帮助你找到一个特定的答案 - 你就越有可能有一个“啊哈”的时刻并弄明白该做什么。 :-)

Answer 2

创建一个全局布尔变量并将其设置为false。 在地图初始化函数结束时，将其值更改为true。

Answer 3

检查你的地图变量是否未定义......

通过

的typeof（地图）;