javascript 在 React 中使用 Google Place Autocomplete API
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52907859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Google Place Autocomplete API in React
提问by Adam.V
I want to have an auto completing location search bar in my react component, but don't know how I would go about implementing it. The documentationsays to include
我想在我的 React 组件中有一个自动完成的位置搜索栏，但不知道我将如何实现它。该文件说包括
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>
in an HTML file, and then have an initialize function pointing to an element - how would I go about doing this with my react component/JSX? I presume I would have to import the api link, but I have no clue where to go from there.
在 HTML 文件中，然后有一个指向元素的初始化函数 - 我将如何使用我的反应组件/JSX 来执行此操作？我想我必须导入 api 链接，但我不知道从那里去哪里。
import React from 'react';
import "https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places&callback=initMap";
const SearchBar = () => (
<input type="text" id="search"/> //where I want the google autocomplete to be
);
export default SearchBar;
回答by Vadim Gremyachev
Google Maps API loading via static import:
Google Maps API 通过静态加载import：
import "https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places&callback=initMap";
is not supported, you need to consider a different options for that purpose:
不支持，您需要为此考虑不同的选项：
- reference Google Maps API JS library via /public/index.html file:
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places"></script> - or dynamicallyload JS resource, for example using this library
- 通过 /public/index.html 文件引用 Google Maps API JS 库：
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places"></script> - 或者动态加载 JS 资源，例如使用这个库
Now regarding SearchBarcomponent, the below example demonstrates how to implement a simple version of Place Autocomplete(without a dependency to Google Map instance) based on this official example
现在关于SearchBar组件，下面的示例演示了如何基于此官方示例实现一个简单版本的Place Autocomplete（不依赖于 Google Map 实例）
import React from "react";
/* global google */
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.autocompleteInput = React.createRef();
this.autocomplete = null;
this.handlePlaceChanged = this.handlePlaceChanged.bind(this);
}
componentDidMount() {
this.autocomplete = new google.maps.places.Autocomplete(this.autocompleteInput.current,
{"types": ["geocode"]});
this.autocomplete.addListener('place_changed', this.handlePlaceChanged);
}
handlePlaceChanged(){
const place = this.autocomplete.getPlace();
this.props.onPlaceLoaded(place);
}
render() {
return (
<input ref={this.autocompleteInput} id="autocomplete" placeholder="Enter your address"
type="text"></input>
);
}
}
回答by Denis S Dujota
Was making a custom address autocomplete for a sign up form and ran into some issues,
正在为注册表单制作自定义地址自动完成功能并遇到一些问题，
// index.html imports the google script via script tag ie: <script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places"></script>
import {useState, useRef, useEffect } from 'React'
function AutoCompleteInput(){
const [predictions, setPredictions] = useState([]);
const [input, setInput] = useState('');
const [selectedPlaceDetail, addSelectedPlaceDetail] = useState({})
const predictionsRef = useRef();
useEffect(
()=>{
try {
autocompleteService.current.getPlacePredictions({ input }, predictions => {
setPredictions(predictions);
});
} catch (err) {
// do something
}
}
}, [input])
const handleAutoCompletePlaceSelected = placeId=>{
if (window.google) {
const PlacesService = new window.google.maps.places.PlacesService(predictionsRef.current);
try {
PlacesService.getDetails(
{
placeId,
fields: ['address_components'],
},
place => addSelectedPlaceDetail(place)
);
} catch (e) {
console.error(e);
}
}
}
return (
<>
<input onChange={(e)=>setInput(e.currentTarget.value)}
<div ref={predictionsRef}
{ predictions.map(prediction => <div onClick={ ()=>handleAutoCompletePlaceSelected(suggestion.place_id)}> prediction.description </div> )
}
</div>
<>
)
}
So basically, you setup the autocomplete call, and get back the predictions results in your local state.
所以基本上，您设置自动完成调用，并在您的本地状态中获取预测结果。
from there, map and show the results with a click handler that will do the follow up request to the places services with access to the getDetails method for the full address object or whatever fields you want.
从那里，映射并使用单击处理程序显示结果，该处理程序将对地点服务执行后续请求，并访问完整地址对象或您想要的任何字段的 getDetails 方法。
you then save that response to your local state and off you go.
然后，您将该响应保存到您的本地状态，然后您就可以开始了。
