Google Map React Defaultcenter动态值不支持？

Question

我正在构建一个下一个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 = () => {
    const {rooms} = useSelector(state => state.roomsByName);
    return (
        <Container sx={styles.Container} className="Consfhru">
            <GoogleMapReact
                bootstrapURLKeys={{key: "API_KEY"}}
                center={{lat: 22.75, lng: 90.41}}
                defaultZoom={11}
            >
                {rooms.slice(0, 10).map((room, i) => (
                    <div
                        key={i}
                        lat={room.lat}
                        lng={room.lng}
                        sx={styles.MapImageContainer}
                    >
                        <Image
                            sx={styles.MapImages}
                            src={room.images[0].url}
                            alt="Images"
                        />
                        <Heading sx={styles.MapPrice} as="h3">${room.price}</Heading>
                    </div>
                ))
                }
            </GoogleMapReact>
        </Container>
    );
};
export default ResMaps;

在这里的中心价值-

center={{lat: 22.75, lng: 90.41}}

当我像上面那样硬编码lat和lng时，地图显示得很完美。

但是我想展示来自后端的center lat和lng信息，比如-

center={{lat: rooms[0].lat, lng: rooms[0}.lng}

那么它就不会显示地图。它只显示类似于白屏图像-

​

我要做的就是。用于动态中心。这里我没有给出动态中心，如果标记远离中心点，则标记转到地图的外部。这就是为什么需要给center赋予动态值的原因。

Answer 1

首先，你把同一个问题放了两次。请不要将同一问题放置两次。您可以编辑上一个问题。答案是一样的。

您正在获取lat或lng的字符串值。但是google地图react只支持数字值。你必须把字符串转换成数字。所以改变你的代码-

center={{ lat: Number(rooms[0].lat), lng: Number(rooms[0].lng) }}

你会发现你的地图已经为你的应用程序准备好了。感谢您在堆栈中提问！