【问题标题】:Google Maps API: data layer rendering complete eventGoogle Maps API:数据层渲染完成事件
【发布时间】:2015-03-31 14:40:32
【问题描述】:

我正在使用 Google Maps API 在地图上显示我的多边形数据。数据以geoJson格式存在,文件大小为2Mb。这就是我向图层添加数据的方式

var parcelLayer = new google.maps.Data();
parcelLayer.addGeoJson(geoJsonObject);

一切正常。

但我面临的问题是;数据文件大小足够大,即大约 2Mb,在地图上渲染需要 5-10 秒,所以我需要在地图上渲染数据时添加一个加载器。

我无法找到在地图数据完成渲染后触发的此类事件或在这种情况下可能有用的任何技巧。我在谷歌上搜索了很多,也检查了这个网站的相关链接,但没有运气

已编辑

我已经尝试过如下addfeature 事件

            count=0;
            parcelLayer.addListener('addfeature', function() {
                count+=1;
                if (count==geoJsonObject.features.length){
                    console.log('all rendered');
                }
            });

但是console 在图层完成渲染之前就响应了。

【问题讨论】:

  • 你试过addfeature事件吗?您可能需要对 GeoJSON 中的功能进行计数才能知道添加最后一个功能的时间。
  • 是的,我已经尝试过 addfeature 事件。但是 addfeature 对所有功能的响应都出现了,并且该图层尚未渲染。在问题中添加了示例

标签: google-maps-api-3 geojson


【解决方案1】:

你为什么不使用

google.maps.event.addListenerOnce(map, 'idle', function(){
    // you can put your layer code for data is present is in geoJson      format here
});

“空闲”事件在地图完全加载时触发,即处于空闲状态。

【讨论】:

  • 你的意思是我需要在上面提到的函数中初始化图层?
  • 是的,如果整个图层具有您希望仅在地图加载完成时公开的功能!
  • 触发时地图仍在渲染中。
【解决方案2】:

我刚刚遇到了同样的问题,并且能够成功地遵循@AniV 的建议。

但我想补充一个让我感到困惑的额外细节。 Google Maps API 允许您通过以下两种方式之一加载 GeoJSON 数据:

1) loadGeoJson:这将 URL 路径作为参数,并通过对该 URL 的 GET 请求拉入 JSON。服务器的 JSON 响应(假设它遵循正确的 GeoJSON 格式)将被添加到地图中。

2) addGeoJson: 这就是你上面使用的。它将 JSON 本身作为参数并将其添加到地图中。

这是我被绊倒的地方:我最近从使用 loadGeoJson 切换到使用 addGeoJson,事实证明,事件侦听器 addfeature 确实以相同的方式工作两种方法。

对于loadGeoJson,在我看来,服务器返回的所有功能都会立即添加,因此事件侦听器addfeature 在添加**所有* 标记后触发。但是对于addGeoJson,功能似乎是一次添加一个,这样addfeature 侦听器会在所有标记都添加之前触发(或者可能根本没有?我不知道是哪种情况),因此代码块没有被执行。

为了解决这个问题,我成功地使用了@AniV 的答案。但我想提供这些额外信息,以防有人从 loadGeoJson 切换到 addGeoJson 遇到与我相同的问题。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-03-23
    • 2016-01-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-03-15
    • 2014-10-05
    • 2016-10-21
    相关资源
    最近更新 更多