没有地图的地理编码地球自动完成框

问题描述

我正在尝试在没有类似于他们网站上示例的地图的情况下集成 geocode.earth 自动完成搜索 API。

我是一名 Python 和 Scala 开发人员，但我是前端新手，我试图弄清楚在没有地图的情况下自动完成使用了什么。提供了详细的传单示例（地图 + 自动完成），但不提供自动完成本身。

我尝试集成这个例子，但它不能正常工作。

import GeocodeEarthAutocomplete from 'react-geocode-earth-autocomplete';

export default (props) => {
    const [address,setAddress] = useState();

    return (
      <GeocodeEarthAutocomplete
        searchOptions={{
          api_key: "ge-..."
        }}
        value={address}
        onChange={(newAddress) => {
          setAddress(newAddress);
        }}
        onSelect={(newAddress) => {
          // do an api call
        }}
      >
        {({ getInputProps,suggestions,getSuggestionItemProps,loading }) => {
          <div>
            <input
              {...getInputProps({
                placeholder: 'Search Places ...',className: 'location-search-input',})}
            />
            <div className="autocomplete-dropdown-container">
              {loading && <div>Loading...</div>}
              {suggestions.map(suggestion => {
                const className = suggestion.active
                  ? 'suggestion-item--active'
                  : 'suggestion-item';
                // inline style for demonstration purpose
                const style = suggestion.active
                  ? { backgroundColor: '#fafafa',cursor: 'pointer' }
                  : { backgroundColor: '#ffffff',cursor: 'pointer' };
                return (
                  <div
                    {...getSuggestionItemProps(suggestion,{
                      className,style,})}
                  >
                    <span>{suggestion.description}</span>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </GeocodeEarthAutocomplete>
    );
  }
}```

解决方法

我推荐使用 Esri 的 ArcGIS rest api。您要查找的是 geocoding-suggest 端点，它返回部分键入的搜索词的可能位置的 JSON。例如，端点：

https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest?text=san%20&maxSuggestions=5&f=json

返回一些这样的值：

[
  {
    "text": "San Bartolomé","magicKey": "dHA9MCNsb2M9Mjg3MjI5MzYjbG5nPTE0MCNwbD0xNzc4MzI5NCNsYnM9MTQ6MzIzNTA1MzI=","isCollection": false
  },{
    "text": "San Kitts y Nevis","magicKey": "dHA9MCNsb2M9NDA3ODE0MTcjbG5nPTE0MCNwbD00MzA2ODYyOSNsYnM9MTQ6MzIzNjU5Njc=",{
    "text": "San Marino","magicKey": "dHA9MCNsb2M9NDgwNTc0NzcjbG5nPTY1I3BsPTUxMDgxMjYzI2xicz0xNDozMjM2ODQxMQ==",{
    "text": "San Martenas","magicKey": "dHA9MCNsb2M9NDg4ODY2MDAjbG5nPTg0I3BsPTUxNjQ1ODYwI2xicz0xNDozMjM2ODU3MA==",{
    "text": "San Martin","magicKey": "dHA9MCNsb2M9NDEyMzg3ODgjbG5nPTY1I3BsPTQzNjU5ODU4I2xicz0xNDozMjM2ODU3Mg==","isCollection": false
  }
]

因此，您可以将文本输入连接到此端点以读取用户正在键入的内容并提供一些自动完成功能，无需地图。您也可以使用许多参数对其进行自定义。