Мобильная версияЯ пытаюсь создать веб-сайт по недвижимости для своего срочного проекта. Функциональность, которую я пытаюсь реализовать: при нажатии на свойство пользователь будет перенаправлен на эту страницу свойства. На странице у меня есть 12 кнопок и другие необходимые детали. При нажатии одной кнопки выполняется вызов API карты и отображаются соответствующие функции API. Приложены три скриншота пользовательского интерфейса.
Проблема в следующем: когда я нажимаю другие кнопки, появляется множество ошибок.
Они:
[*]Uncaught ReferenceError: Google не определен [*]Невозможно прочитать свойства неопределенного объекта (чтение «карт») [*]Невозможно прочитать неопределенные свойства (чтение «PlacesService») и т. д. (Этот конкретный параметр приводит к тому, что страница не отображается)
У меня есть функция вызова API в качестве компонента, и на странице я импортирую функцию из компонента.
Вот код функции API карты:
import React, { useCallback, useState, useRef, useEffect } из «реагировать»; Импортировать { Google Map, использоватьJsApiLoader, Маркер, Загрузочный скрипт, Инфоокно, Круг, } из "@react-google-maps/api"; функция NearbyPlacesComponent({ center, type }) { константные библиотеки = ["места"]; const { isLoaded } = useJsApiLoader({ googleMapsApiKey: API_KEY, библиотеки, }); константный поискРадиус = 1500; // Состояние для хранения близлежащих мест и выбранного места const [places, setPlaces] = useState([]); const [selectedPlace, setSelectedPlace] = useState (null); useEffect(() => { если (isLoaded) { const service = new window.google.maps.places.PlacesService( document.createElement("div") ); константный запрос = { расположение: центр, радиус: "1500", тип: тип, }; service.nearbySearch(запрос, (результаты, статус) => { если ( статус === window.google.maps.places.PlacesServiceStatus.OK && Результаты ) { setPlaces (результаты); console.log(результаты); } }); } }, [isLoaded]); const handleMarkerClick = (место) => { setSelectedPlace (место); }; вернуть isLoaded && места? ( {places.map((место, индекс) => ( handleMarkerClick(место)} /> ))} {выбранное место && ( setSelectedPlace(null)} > {selectedPlace.name {selectedPlace.vicinity
{/* Более подробную информацию можно указать здесь */} )} ) : ( Загрузка... ); } экспорт {NearbyPlacesComponent};
Я проверил функциональность кнопки. Они без проблем отправляют центральную информацию и реквизиты компонента. Достаточно сказать, что проблема вызвана попыткой реакции выполнить рендеринг до того, как все библиотеки и данные были получены асинхронным вызовом API. Как мне остановить это и убедиться, что при каждом нажатии кнопки карта загружается правильно?
Я попробовал установить несколько состояний, которые я установил после получения каждого компонента библиотеки и данных, а затем И все состояния перед рендерингом. Однако это не сработало. Я также попытался получить данные на родительской странице, вызвав хук useEffect. Ничего не помогло.
Сначала кнопка карты выбрана по умолчанию:
Что должно произойти при нажатии кнопки начального образования:
Что происходит, вы можете видеть, что отображается только карта, но нет круга и маркера:
