#reactjs #google-maps #react-hooks #next.js #google-map-react
Вопрос:
Я создаю следующее приложение js. Здесь я сталкиваюсь с одной проблемой. У меня есть api из бэкенда, подобный этому-
"rooms": [ { "id": "6178f32148cdaf9caad775a5", "name": "Kelmot Villa", "lat": "22.7562851", "lng": "90.4109839" } ] И это мой компонент-
import {Container, Heading, Image, Box} from "theme-ui"; import GoogleMapReact from 'google-map-react'; import {useSelector} from "react-redux"; const ResMaps = () =gt; { const {rooms} = useSelector(state =gt; state.roomsByName); return ( lt;Container sx={styles.Container} className="Consfhru"gt; lt;GoogleMapReact bootstrapURLKeys={{key: "API_KEY"}} center={{lat: 22.75, lng: 90.41}} defaultZoom={11} gt; {rooms.slice(0, 10).map((room, i) =gt; ( lt;div key={i} lat={room.lat} lng={room.lng} sx={styles.MapImageContainer} gt; lt;Image sx={styles.MapImages} src={room.images[0].url} alt="Images" /gt; lt;Heading sx={styles.MapPrice} as="h3"gt;${room.price}lt;/Headinggt; lt;/divgt; )) } lt;/GoogleMapReactgt; lt;/Containergt; ); }; export default ResMaps; Здесь в центре значения-
center={{lat: 22.75, lng: 90.41}} Когда я жестко закодировал lat и lng, как показано выше, карта отлично отображается. 
Но я хочу показать центр lat и lng из внутренней информации, такой как-
center={{lat: rooms[0].lat, lng: rooms[0}.lng} Тогда он не показывает карту. Он показывает только белый экран, как изображение- 
Что я должен сделать. Для динамического центра. здесь я не даю динамический центр, затем маркер перемещается за пределы карты, если маркер находится далеко от центральной точки. Вот почему необходимо придать центру динамическое значение.
Ответ №1:
Прежде всего, вы дважды задаете один и тот же вопрос. Пожалуйста, не задавайте один и тот же вопрос дважды. Вы можете отредактировать свой предыдущий вопрос. Ответ тот же самый.
Вы получаете строковое значение для lat или lng. Но Google map react поддерживает только числовое значение. Вам нужно просто преобразовать строку в число. Так что измените свой код-
center={{ lat: Number(rooms[0].lat), lng: Number(rooms[0].lng) }} И вы обнаружите, что ваша карта готова для вашего приложения. Спасибо за вопросы в стеке!