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]

e.g。

mapsLoaded['map-canvas-0']

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

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

你能越清楚地指出这类问题，就越有可能有人可以帮助你找到一个具体的答案 - 你就越有可能有一个“啊哈”的时刻并弄清楚到底是什么做。： - ）

Answer 2

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

Answer 3

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

通过

的typeof（地图）;

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

3 个答案: