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

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 美国街道地址这样的服务 API。目前，还有一个国际街道地址 API，但它不提供内置的批处理功能。您可以阅读更多相关信息 here

免责声明：我为 SmartyStreets 工作

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

Geocode multiple addresses with React

promise

google-geocoder

async-await

reactjs

react-native