谷歌地圖在默認中心值中反應問題？-有解無憂

我正在構建下一個 js 應用程式。在這里，我面臨一個問題。我有一個這樣的后端 api（在 getServerSideProps 的服務器端獲取的 api）

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

我正在構建下一個 js 應用程式。在這里，我面臨一個問題。我有一個像這樣后端的 api-

"房間": [ { "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: rooms[0].lat, lng: rooms[0}.lng}

然后它不顯示地圖。它只顯示像影像一樣的白屏 -

谷歌地圖在默認中心值中反應問題？

任何人都可以請幫忙。我面臨這個問題 1 個月了！

uj5u.com熱心網友回復：

您正在獲取 lat 或 lng 的字串值。但是谷歌地圖反應只支持數字值。您必須將字串轉換為數字。所以改變你的代碼 -

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

您會發現您的地圖已準備好用于您的應用程式。感謝您在堆疊中提問！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/349435.html

標籤：javascript 反应谷歌地图下一个.js 谷歌地图反应

上一篇：初始化后編譯失敗。ReactJs

下一篇：隨機化wordsetjavascript陣列