Question

我正在使用react-native-geocoder包对多个地址进行地理编码。问题是显然我的代码在批处理请求方面存在一些问题。

为什么代码适用于单个请求而不适用于批处理请求，是否有办法解决此错误？

async getLocations(locations) {
  Geocoder.fallbackToGoogle(GEOCODE_API_KEY);
  this.setState({
    annotations: await Promise.all(locations.map(this.getLocation))
  });
}

async getLocation(location) {
  try {
    let res = await Geocoder.geocodeAddress(location.address);
    console.log("RESULT:", location.address, await res[0].position);
    return (
      {
        latitude: await res[0].position.lat,
        longitude: await res[0].position.lng,
        title: location.provider,
        subtitle: location.address,
      }
    );
  }
  catch(err) {
    console.log("Error fetching geodata:", err);
  }
  return null;
}

结果（仅限最后一次请求）：

Error fetching geodata Error: geocodePosition failed(…)
Error fetching geodata Error: geocodePosition failed(…)
Error fetching geodata Error: geocodePosition failed(…)
Error fetching geodata Error: geocodePosition failed(…)
Error fetching geodata Error: geocodePosition failed(…)
RESULT getLocationPosition Object {lat: 22.544028, lng: 19.124154}
Possible Unhandled Promise Rejection (id: 0):
Cannot read property 'id' of null
TypeError: Cannot read property 'id' of null
    at http://hostserver/index.ios.bundle?platform=ios&dev=true&hot=true:35937:11
    at Array.map (native)
    at Constructor.render (http://hostserver/index.ios.bundle?platform=ios&dev=true&hot=true:35928:38)
    at Constructor.proxiedMethod [as render] (http://hostserver/index.ios.bundle?platform=ios&dev=true&hot=true:9036:22)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://hostserver/index.ios.bundle?platform=ios&dev=true&hot=true:22776:28)
    at ReactCompositeComponentWrapper._renderValidatedComponent (http://hostserver/index.ios.bundle?platform=ios&dev=true&hot=true:22802:24)
    at ReactCompositeComponentWrapper._updateRenderedComponent (http://hostserver/index.ios.bundle?platform=ios&dev=true&hot=true:22728:30)
    at ReactCompositeComponentWrapper._performComponentUpdate (http://hostserver/index.ios.bundle?platform=ios&dev=true&hot=true:22708:6)
    at ReactCompositeComponentWrapper.updateComponent (http://hostserver/index.ios.bundle?platform=ios&dev=true&hot=true:22627:6)
    at ReactCompositeComponentWrapper.receiveComponent (http://hostserver/index.ios.bundle?platform=ios&dev=true&hot=true:22527:6)

Answer 1

根据评论中的建议，地理编码API可能不支持并发请求。尝试批处理：

async getLocations(locations) {
  Geocoder.fallbackToGoogle(GEOCODE_API_KEY);
  const annotations = []
  for (const l of locations) {
    const r = await this.getLocation(l)
    if (r == null) continue; // or display error message or whatever
    annotations.push(r)
    this.setState({annotations}); // move this after the loop if you want only one update
  }
}

Answer 2

如果您想要一个内置批量地理编码的解决方案，您可以尝试像SmartyStreets US Street Address API这样的服务。目前，还有一个国际街道地址API，但它不提供内置批量。您可以阅读更多相关信息here

免责声明：我为SmartyStreets工作

使用React对多个地址进行地理编码

2 个答案: