React/Material UI - Google 地点自动完成下拉菜单有时不起作用
React/Material UI - Google Places autocomplete dropdown sometimes doesn't work
所以此代码有效,但有时在页面加载或刷新 google 位置下拉自动完成建议未显示,我可以在搜索框中键入任何内容,但它不会加载自动完成框.什么可能导致此问题?
这是代码。
const apiKey = process.env.REACT_APP_GOOGLE_KEY;
const mapApiJs = 'https://maps.googleapis.com/maps/api/js';
const geocodeJson = 'https://maps.googleapis.com/maps/api/geocode/json';
// load google map api js
function loadAsyncScript(src) {
return new Promise(resolve => {
const script = document.createElement("script");
Object.assign(script, {
type: "text/javascript",
async: true,
src
})
script.addEventListener("load", () => resolve(script));
document.head.appendChild(script);
})
}
const extractAddress = (place) => {
const address = {
city: "",
state: "",
zip: "",
country: "",
plain() {
const city = this.city ? this.city + ", " : "";
const zip = this.zip ? this.zip + ", " : "";
const state = this.state ? this.state + ", " : "";
return city + zip + state + this.country;
}
}
if (!Array.isArray(place?.address_components)) {
return address;
}
if(typeof place.geometry.location.lat === 'function') {
address.lat = place.geometry.location.lat();
} else {
address.lat = place.geometry.location.lat;
}
if(typeof place.geometry.location.lng === 'function') {
address.lng = place.geometry.location.lng();
} else {
address.lng = place.geometry.location.lng;
}
place.address_components.forEach(component => {
const types = component.types;
const value = component.long_name;
if (types.includes("locality")) {
address.city = value;
}
if (types.includes("administrative_area_level_2")) {
address.state = value;
}
if (types.includes("postal_code")) {
address.zip = value;
}
if (types.includes("country")) {
address.country = value;
}
});
return address;
}
function ReportForm() {
const searchInput = useRef(null);
const [address, setAddress] = useState({});
const [coords, setCoords] = useState({
lat: 42.680115925419294,
lng: 14.010667884881462,
});
// init gmap script
const initMapScript = () => {
// if script already loaded
if(window.google) {
return Promise.resolve();
}
const src = `${mapApiJs}?key=${apiKey}&libraries=places&v=weekly`;
return loadAsyncScript(src);
}
// do something on address change
const onChangeAddress = (autocomplete) => {
const place = autocomplete.getPlace();
setAddress(extractAddress(place));
setCoords({
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng(),
});
}
// init autocomplete
const initAutocomplete = () => {
if (!searchInput.current) return;
const autocomplete = new window.google.maps.places.Autocomplete(searchInput.current);
autocomplete.setFields(["address_component", "geometry"]);
autocomplete.addListener("place_changed", () => onChangeAddress(autocomplete));
}
const reverseGeocode = ({ latitude: lat, longitude: lng}) => {
const url = `${geocodeJson}?key=${apiKey}&latlng=${lat},${lng}`;
searchInput.current.value = "Getting your location...";
fetch(url)
.then(response => response.json())
.then(location => {
const place = location.results[0];
const _address = extractAddress(place);
setAddress(_address);
searchInput.current.value = _address.plain();
setCoords({
lat: lat,
lng: lng,
});
})
}
const findMyLocation = () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
reverseGeocode(position.coords)
})
}
}
// load map script after mounted
useEffect(() => {
initMapScript().then(() => initAutocomplete())
}, []);
return(
<>
<form>
<div>
<div className="search">
<span><Search /></span>
<input
name="address"
ref={searchInput}
type="text"
placeholder="Search Address...."
/>
<button type="button" onClick={findMyLocation}><GpsFixed /></button>
</div>
</div>
</form>
</>
);
}
我也尝试过使用 Material UI TextField
和 inputRef
而不是标准的 input
,但我遇到了同样的问题。此外,它更常发生在页面刷新时。在第一页加载时,它几乎每次都能正常工作。
您是否尝试过将 searchInput.current
添加到 useEffect
的依赖数组中?您在 initAutocomplete
中有此行 if (!searchInput.current) return;
,并且您的 searchInput
最初设置为 null
。因此,在页面刷新时,输入元素上设置的 ref
与 initAutocomplete
函数的 运行 之间可能存在竞争条件。
所以此代码有效,但有时在页面加载或刷新 google 位置下拉自动完成建议未显示,我可以在搜索框中键入任何内容,但它不会加载自动完成框.什么可能导致此问题?
这是代码。
const apiKey = process.env.REACT_APP_GOOGLE_KEY;
const mapApiJs = 'https://maps.googleapis.com/maps/api/js';
const geocodeJson = 'https://maps.googleapis.com/maps/api/geocode/json';
// load google map api js
function loadAsyncScript(src) {
return new Promise(resolve => {
const script = document.createElement("script");
Object.assign(script, {
type: "text/javascript",
async: true,
src
})
script.addEventListener("load", () => resolve(script));
document.head.appendChild(script);
})
}
const extractAddress = (place) => {
const address = {
city: "",
state: "",
zip: "",
country: "",
plain() {
const city = this.city ? this.city + ", " : "";
const zip = this.zip ? this.zip + ", " : "";
const state = this.state ? this.state + ", " : "";
return city + zip + state + this.country;
}
}
if (!Array.isArray(place?.address_components)) {
return address;
}
if(typeof place.geometry.location.lat === 'function') {
address.lat = place.geometry.location.lat();
} else {
address.lat = place.geometry.location.lat;
}
if(typeof place.geometry.location.lng === 'function') {
address.lng = place.geometry.location.lng();
} else {
address.lng = place.geometry.location.lng;
}
place.address_components.forEach(component => {
const types = component.types;
const value = component.long_name;
if (types.includes("locality")) {
address.city = value;
}
if (types.includes("administrative_area_level_2")) {
address.state = value;
}
if (types.includes("postal_code")) {
address.zip = value;
}
if (types.includes("country")) {
address.country = value;
}
});
return address;
}
function ReportForm() {
const searchInput = useRef(null);
const [address, setAddress] = useState({});
const [coords, setCoords] = useState({
lat: 42.680115925419294,
lng: 14.010667884881462,
});
// init gmap script
const initMapScript = () => {
// if script already loaded
if(window.google) {
return Promise.resolve();
}
const src = `${mapApiJs}?key=${apiKey}&libraries=places&v=weekly`;
return loadAsyncScript(src);
}
// do something on address change
const onChangeAddress = (autocomplete) => {
const place = autocomplete.getPlace();
setAddress(extractAddress(place));
setCoords({
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng(),
});
}
// init autocomplete
const initAutocomplete = () => {
if (!searchInput.current) return;
const autocomplete = new window.google.maps.places.Autocomplete(searchInput.current);
autocomplete.setFields(["address_component", "geometry"]);
autocomplete.addListener("place_changed", () => onChangeAddress(autocomplete));
}
const reverseGeocode = ({ latitude: lat, longitude: lng}) => {
const url = `${geocodeJson}?key=${apiKey}&latlng=${lat},${lng}`;
searchInput.current.value = "Getting your location...";
fetch(url)
.then(response => response.json())
.then(location => {
const place = location.results[0];
const _address = extractAddress(place);
setAddress(_address);
searchInput.current.value = _address.plain();
setCoords({
lat: lat,
lng: lng,
});
})
}
const findMyLocation = () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
reverseGeocode(position.coords)
})
}
}
// load map script after mounted
useEffect(() => {
initMapScript().then(() => initAutocomplete())
}, []);
return(
<>
<form>
<div>
<div className="search">
<span><Search /></span>
<input
name="address"
ref={searchInput}
type="text"
placeholder="Search Address...."
/>
<button type="button" onClick={findMyLocation}><GpsFixed /></button>
</div>
</div>
</form>
</>
);
}
我也尝试过使用 Material UI TextField
和 inputRef
而不是标准的 input
,但我遇到了同样的问题。此外,它更常发生在页面刷新时。在第一页加载时,它几乎每次都能正常工作。
您是否尝试过将 searchInput.current
添加到 useEffect
的依赖数组中?您在 initAutocomplete
中有此行 if (!searchInput.current) return;
,并且您的 searchInput
最初设置为 null
。因此,在页面刷新时,输入元素上设置的 ref
与 initAutocomplete
函数的 运行 之间可能存在竞争条件。