我正在嘗試從 Google Maps API 獲取附近的搜索靠近我的地方，并將這些資料發送到我的子組件，以便在地圖中放置標記。
這是我呼叫 Google Service Nearby Search 的功能，它會在 console.log 中列印正確的資料
const handleZoomChanged = () => {
let lat = map.mapUrl.split('=')[1].split('&')[0].split(',')[0];
let lng = map.mapUrl.split('=')[1].split('&')[0].split(',')[1];
let places = getNearby(lat, lng);
console.log('places', places);
console.log('length', places.length); //EDIT: I tried to get the length of the array and get 0
return (
<MainMarkersGoogle places={places} />
)
}
但是回傳似乎沒有呼叫子組件并發送資料。
我在父組件中呼叫這個函式：
export const MainMap = () => {
const renderMap = () => {
return(
<GoogleMap
id="map"
onLoad={map => {setMap(map)}}
zoom={15}
center={center}
onZoomChanged={handleZoomChanged}>
</GoogleMap>
)
}
return isLoaded ? renderMap() : 'Loading...'
}
這是子組件：
/* global google */
export const MainMarkersGoogle = ( places ) => {
const [markers, setMarkers] = useState([]);
useEffect(() => {
console.log('child', places)
setMarkers(places)
}, [places])
return(
{markers.map(({ id, geometry, name }) => (
<Marker
key={id}
position={geometry.location}
animation={google.maps.Animation.DROP}
onClick={() => console.log(id) }
title={name}
>
</Marker>
))}
)
}
來自useEffect 的console.log 不會出現，標記也不會顯示在地圖中。
我試圖接收子組件
出口 const MainMarkersGoogle = ({places}) => {
和
出口 const MainMarkersGoogle = 地方 => {
得到相同的結果。
編輯：我也展示了 getNearby 函式，也許問題出在這個函式內部，但我找不到在哪里：
function getNearby(lat, lng) {
let places;
var config = {
method: 'get',
url: `MY_URL`,
headers: { }
};
axios(config)
.then(function (response) {
console.log(response.data);
for(let i = 0; i < response.data.results.length; i ) {
if(response.data.results[i].business_status === 'OPERATIONAL')
places.push(response.data.results[i])
}
})
.catch(function (error) {
console.log(error);
});
return places;
}
如果您需要有關我的代碼的更多資訊，請詢問我，我將對其進行編輯。
uj5u.com熱心網友回復：
檢查 Google Maps 的檔案以了解反應，onZoomChanged 是一個 void 事件偵聽器。它不應該回傳元素https://react-google-maps-api-docs.netlify.app。一種方法是使用位置更新狀態變數并已安裝組件。當然，您可以大開腦洞并找到其他方法來達到相同的結果。此外，您正在更新 Promise 內的位置并回傳 Promise 之外的位置，因此當您回傳它們時它們是空的，因為 Promise 未解決。嘗試使用 async-await 來實作類似阻塞的效果。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/469168.html