0

我正在构建下一个 js 应用程序。在这里，我面临一个问题。我有一个这样的后端api（在getServerSideProps的服务器端获取的api）

"rooms": [
        {
          "id": "6178f32148cdaf9caad775a5",
          "name": "Kelmot Villa",
          "lat": "22.7562851",
          "lng": "90.4109839"
        }
]

我正在构建下一个 js 应用程序。在这里，我面临一个问题。我有一个这样的后端api-

“房间”：[{“id”：“6178f32148cdaf9caad775a5”，“名称”：“凯尔莫特别墅”，“纬度”：“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: rooms[0].lat, lng: rooms[0}.lng}

然后它不显示地图。它只显示像图像一样的白屏-

在此处输入图像描述

任何人都可以帮忙吗？我面临这个问题1个月！

4

1 回答 1

1

您正在获取 lat 或 lng 的字符串值。但谷歌地图反应只支持数字值。您必须将字符串转换为数字。所以改变你的代码 -

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

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

于 2021-11-05T18:52:23.970 回答