我正在尝试在我的应用程序中使用 Google Maps Api，一切都很好，直到我想在地图的第一次渲染时显示标记。标记没有显示，但如果我在渲染完成后再添加一个标记，标记就会出现。
所以问题是我想用已经存在的标记渲染地图，我不想等待选择某个位置。
我想从 props 接收 lat 和 lng，但现在我已经做了一个硬编码的 const（中心）。
import React, { useMemo } from "react";
import { useJsApiLoader, GoogleMap, Marker } from "@react-google-maps/api";
export default function GoogleMaps({ lat, lng }) {
const { isLoaded } = useJsApiLoader({
googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
});
const center = useMemo(() => ({ lat: 42.4332, lng: 20.4343 }), []);
if (!isLoaded) {
return <h2>Calculating Locations..</h2>;
}
return (
isLoaded && (
<GoogleMap
center={center}
zoom={17}
mapContainerStyle={{ width: "450px", height: "400px" }}
options={{ disableDefaultUI: true, mapId: "deleted for this snippet" }}
>
<Marker position={center} />
</GoogleMap>
)
);
}
您是否尝试过导入并使用 MarkerF 而不是 Marker？
See: https://github.com/JustFly1984/react-google-maps-api/issues/3048#issuecomment-1166410403 https://github.com/JustFly1984/react-google-maps-api/issues/3048#issuecomment-1166410403
“MarkerF 是功能组件，而不是基于类的 Marker 组件，它不适用于 React Strict 和/或 React@17+”
此外，这里还讨论了类似的问题：标记未使用 @react-google-maps/api 渲染 https://stackoverflow.com/questions/72229607/markers-not-rendering-using-react-google-maps-api/73769832#73769832和这里：地图标记不显示（标记在地图之前渲染）- ReactJS 和 @react-google-maps/api https://stackoverflow.com/questions/72298107/map-marker-dont-show-up-marker-rendered-before-map-reactjs-with-react-googl/73783605#73783605
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
