如何确定 Google Maps loadGeoJson 何时完成？答案

【问题标题】：how can I determine when Google Maps loadGeoJson completes?如何确定 Google Maps loadGeoJson 何时完成？
【发布时间】：2014-05-29 02:11:57
【问题描述】：

我有一个场景，用户可以存储他们的映射样式。当用户使用地图导航回该页面时，它应该以以前的方式显示地图。

用户可以根据人口统计信息更改地理和边界的颜色以及应用主题样式。

随着新 loadGeoJson 的发布，我在加速我的应用程序方面取得了巨大成功，最初我是通过 JS 自己绘制所有地理区域。这导致了大约 1500 个地区的一些内存问题。这个新功能大大减少了它。我选择在服务器端生成 Features 对象，然后将 URL 传递给地图进行渲染。此 URL 与所有其他样式信息一起传递，以像以前一样重建地图。

我遇到的问题是，当我尝试应用样式时，地图没有检索到要在地图上显示的要素列表。

查看文档，我没有看到任何专门针对 loadGeoJson 方法的事件，但确实看到了 addfeature 和 setgeometry，但是在使用 loadGeoJson 方法时这些事件都没有引发。

这一切都是用 Typescript 编写的，并尝试遵守非常严格的 MVVM 方法，使用 Knockout 通过绑定为我处理所有 UI 更改。

我是否可以绑定另一个事件来查看此方法何时完成，以便我可以适当地应用我的样式？

还有其他方法可以让我在某处“等待”烘烤吗？ .

【问题讨论】：

你能链接文档吗？

标签： javascript google-maps-api-3 knockout.js typescript

【解决方案1】：

addfeature 事件肯定是由 loadGeoJson 调用的，如果不适合你是一些设置错误。

loadGeoJson 有一个可选的回调参数，在加载所有特征后调用，并将特征作为参数。

https://developers.google.com/maps/documentation/javascript/3.exp/reference

loadGeoJson(url:string, options?:Data.GeoJsonOptions, 回调？：函数（数组））

您可以通过此回调向您的代码发出信号，表明它可以继续处理。

map.data.loadGeoJson('google.json', null, function (features) {
    map.fitBounds(bounds); // or do other stuff what requires all features loaded
});

您还可以将 loadGeoJson 包装到一个 Promise 中，并在 loadGeoJson 的回调中解析该 Promise。

function loadGeoJson(url, options) {
    var promise = new Promise(function (resolve, reject) {
      try {
        map.data.loadGeoJson(url, options, function (features) {
            resolve(features);
        });
      } catch (e) {
        reject(e);
      }
    });

    return promise;
}

// Somewhere else in your code:
var promise = loadGeoJson('studs.json');

promise.then(function (features) {
    // Do stuff
});

promise.catch(function (error) {
    // Handle error
});

【讨论】：

您好，我在这里使用您的解决方案！效果很好，如果 json 无效，有一个关于如何错误陷阱的问题。我似乎无法捕捉到那个错误。我正在从可能更改的 json 文件加载并想告诉用户 json 文件无效......目前我只得到“ Uncaught InvalidValueError: in property "features": at index 42: in property "geometry":在属性“几何”中：在索引 1：在属性“坐标”中：在索引 0：第一个和最后一个位置不相等”在 Chrome 中......似乎无法捕捉到这个......如果有人知道，请提前谢谢??
@Tim 如果 loadGeoJson 抛出异常，您可以将其嵌入到 try-catch 块中。查看更新后的答案。
是的，我已经尝试过了，就像你拥有它一样卡住了 try catch，而 chrome 就是无法捕捉到它。这就是我提出问题的原因。谢谢你的回应。 ..

【解决方案2】：

您可以收听addFeature 事件，该事件将为您的 json 中的每个功能触发。例如如果您使用https://storage.googleapis.com/maps-devrel/google.json，则在 json 请求完成后引发六个事件，即当 google api 开始从 json 文件添加功能时：

您可以在此处查看演示：http://jsbin.com/ofutUbA/4/edit

【讨论】：

...在 json 请求完成后引发事件... 那么对于第一个 addFeature 事件，我们可以安全地假设所有 json 数据都已收到？谢谢。
@AntoJurković 是，如果功能名称匹配只能来自 JSON 的内容。我怀疑它是真的，因为我们订阅了.data.addListener，它只会引发从.data 创建的功能的事件，因此loadGeoJson 但他们混淆了代码，我无法查看内部
谢谢你这样做。我将侦听器添加到地图中，而不是数据中。这就是它没有被提出的原因。

【解决方案3】：

人们会假设，如果您使用淘汰赛，可能会绑定到某些侦听器，或将侦听器附加到事件。

大多数通过 JavaScript 的事件总是有一个回调函数，这是一个很好的实践，这样一旦一个函数完成了一些长的 I/O 或 Database 查询，它将立即执行该函数。显然，该回调将由您定义。

someLongTimeFunction(function (data) {
  // usually this callback will be fired when the function has finished.
});

如果您熟悉敲除，那么您会知道，一旦检索到数据并通过observable，observable 将更新其绑定。

这里是扩展 observables 的链接：knockout js

据我所知，这个loadGeoJson是服务器端的吗？如果是这样，您可以从客户端进行一次长轮询并与之绑定：

function doRequest() {
  var request = $.ajax({
    dataType: "json",
    url: 'loadGeoJson',
    data: data,
  });

  request.done(function(data, result) {
    if (result !== "success") {
      setTimeout(doRequest, 10000);
    }
  });
}

【讨论】：