我正在构建下一个 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: rooms[0].lat, lng: rooms[0}.lng}
我必须做的。为动态中心。在这里,如果标记远离中心点,我不给动态中心然后标记转到地图的外部。这就是为什么需要为中心赋予动态价值的原因。