API V3 上的 Google Maps ClusterManager 在重新加载/初始加载时不起作用

Google Maps ClusterManager on API V3 not working on reload / initial load

本文关键字：加载 不起作用 新加载 Google 上的 V3 Maps ClusterManager API      更新时间：2023-09-26

我正在尝试使用 http://cm.qfox.nl/的Google Maps V3 API ClusterManager将地图上的标记聚集在一起，但是我在代码中遇到了与原始网站相同的错误 - 第一次加载页面或重新加载页面时出现错误：

Uncaught TypeError: Cannot call method 'fromLatLngToPoint' of undefined ClusterManager_v3.js:586
ClusterManager.latlngToPoint ClusterManager_v3.js:586
ClusterManager._getMarkerBounds ClusterManager_v3.js:645
ClusterManager._cacheMarkerIcon ClusterManager_v3.js:580
ClusterManager.update ClusterManager_v3.js:345
(anonymous function) ClusterManager_v3.js:91

它在初始加载后工作正常，所以我相当确定这是因为时间问题 - 例如，地图或标记在使用之前没有初始化。不幸的是，我想不出一种方法来等待所有内容初始化，因为Javascript不是我的第一语言。任何帮助或指示将非常受欢迎。网站的源代码是我几乎完全使用的代码。

更新：

如果发现更改行：

cm._requestUpdate(50);

自

cm._requestUpdate(250);

已防止错误。将其更改为 150 会导致错误发生 3/10 次。我不完全确定这是一个修复程序，但它可能是所以我留下这个帖子，以防万一其他人有更好的解决方案或想知道我的。

为了使用投影方法，必须对其进行初始化。地图将在创建Projection时触发"projection_changed"事件。只有在那之后，你才能使用 map.getProjection() .所以我的建议是，添加"projection_changed"事件的侦听器，并在调用时初始化ClusterManager：

google.maps.event.addListenerOnce(map, 'projection_changed', function(){
     var cm = window.cm = new ClusterManager(
        map,
        {
            objClusterIcon: new google.maps.MarkerImage('markers/cluster.png', false, false, false, new google.maps.Size(20,20)),
            objClusterImageSize: new google.maps.Size(20,20)
        }
    );
    // now json contains a list of marker positions. lets add them.
    for (var i = 0; i < json.length; ++i) {
       .....
    }
    cm._requestUpdate(50);
});
相关文章：