@ react Google -map/api Google map标记未显示react JS
@ react Google -map/api Google map标记未显示react JS
提问于 2022-08-17 08:12:38
有人能帮忙吗？我的地图正在渲染和工作完美，但我的标记不起作用，我已经与此斗争了4个小时。
import React from "react";
import { GoogleMap, Marker } from "@react-google-maps/api";
function Map({ lati, longi }) {
const position = {
// lat: lati,
// lng: longi,
lat: 33.7295198,
lng: 73.0371536,
};
const onLoad = (marker) => {
console.log("marker: ", marker);
};
return (
<>
<GoogleMap
zoom={18}
center={{ lat: lati, lng: longi }}
mapContainerClassName="map-container"
>
<Marker onLoad={onLoad} position={position} />
</GoogleMap>
</>
);
}
export default Map;回答 2
Stack Overflow用户
回答已采纳
发布于 2022-09-14 12:24:19
试一试
import { GoogleMap, MarkerF } from "@react-google-maps/api";
<MarkerF />Stack Overflow用户
发布于 2022-08-18 04:09:35
海事组织，这可能是因为严格模式两次呈现应用程序，所以我们在第一次渲染时创建的标记不会在下一次呈现时重新创建。
因此，只需通过更改以下内容，从React.StrictMode root.render中删除，从而禁用严格模式：
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);这方面：
root.render(<App />);然后，您可以在您的应用程序中呈现地图，方法是在呈现地图之前确保加载了google.maps对象：
App.js
import { useEffect } from "react";
import { useJsApiLoader } from "@react-google-maps/api";
import Map from "./Map";
function App() {
const { isLoaded } = useJsApiLoader({
id: "google-map-script",
googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
});
useEffect(() => {
console.log(isLoaded);
}, [isLoaded]);
return <div>{isLoaded && <Map lati={-6.2297465} longi={106.829518} />}</div>;
}
export default App;Map.js
import React from "react";
import { GoogleMap, Marker } from "@react-google-maps/api";
function Map({ lati, longi }) {
const position = {
lat: -6.175878,
lng: 106.827196,
};
const onLoad = (marker) => {
console.log("marker: ", marker);
};
return (
<>
<GoogleMap
zoom={12}
center={{ lat: lati, lng: longi }}
mapContainerStyle={{ width: "100%", height: "100vh" }}
>
<Marker onLoad={onLoad} position={position} />
</GoogleMap>
</>
);
}
export default Map;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73385012
复制相关文章
相似问题
腾讯云开发者
