我们能查出一个谷歌地图是否已经初始化了吗？

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 张地图。你肯定不是说你已经调用new google.maps.Map()了这 200 张地图中的每一张？这似乎会导致加载页面非常缓慢。

实际上，您是否有 200 个容器<div>元素，其中一些可能已使用new google.maps.Map()您的initialize()函数中的as使用映射进行了初始化，而其中一些尚未使用该代码进行初始化，但在<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？在什么情况下您需要知道地图是否已创建——您什么时候需要知道这一点以及为什么？

你越能清楚地说明这些类型的问题，就越有可能有人可以帮助你给出具体的答案——你就越有可能“啊哈”的时刻并弄清楚该怎么做。:-)