如何解决没有地图的地理编码地球自动完成框
我正在尝试在没有类似于他们网站上示例的地图的情况下集成 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
}
]
因此,您可以将文本输入连接到此端点以读取用户正在键入的内容并提供一些自动完成功能,无需地图。您也可以使用许多参数对其进行自定义。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。