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

【问题标题】：Geocode Earth Autocomplete Box Without Map没有地图的地理编码地球自动完成框
【发布时间】：2021-05-24 07:51:30
【问题描述】：

我正在尝试在没有类似于他们网站上示例的地图的情况下集成 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>
    );
  }
}```

【问题讨论】：

标签： javascript reactjs autocomplete react-leaflet geocode

【解决方案1】：

我推荐使用 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=",
    "isCollection": false
  },
  {
    "text": "San Marino",
    "magicKey": "dHA9MCNsb2M9NDgwNTc0NzcjbG5nPTY1I3BsPTUxMDgxMjYzI2xicz0xNDozMjM2ODQxMQ==",
    "isCollection": false
  },
  {
    "text": "San Martenas",
    "magicKey": "dHA9MCNsb2M9NDg4ODY2MDAjbG5nPTg0I3BsPTUxNjQ1ODYwI2xicz0xNDozMjM2ODU3MA==",
    "isCollection": false
  },
  {
    "text": "San Martin",
    "magicKey": "dHA9MCNsb2M9NDEyMzg3ODgjbG5nPTY1I3BsPTQzNjU5ODU4I2xicz0xNDozMjM2ODU3Mg==",
    "isCollection": false
  }
]

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

【讨论】：

【解决方案2】：

这里是 Geocode Earth 的联合创始人。

我们最近发布了 Autocomplete Element，这是一个基于 React 的轻量级 Web component，让您可以轻松地将搜索框添加到任何网页，无论是否带有地图。

完整的设置说明可以在我们上面列出的文档中找到，但是这样的内容适用于大多数人：

<!-- load the autocomplete element code. An NPM module is also available if you prefer -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@geocodeearth/autocomplete-element/dist/bundle.js"></script>

<!-- add the autocomplete element wherever you'd like on your page -->
<ge-autocomplete api_key="YOUR-API-KEY"></ge-autocomplete>

自动完成元素包含了我们所有来之不易的自动完成界面最佳实践（它比您想象的要正确！）并且是open source，因此易于检查、改进和构建。

【讨论】：