在 React 中轻松集成 Google Maps。
通常情况下，你会被要求在开发的网站中添加来自 Google Maps 的地图。
这在 React 应用中集成起来可能看起来很麻烦，但幸运的是，Alexey Lyakhov 创建了一个包来简化这个过程：React Google Maps API。而且
它的文档也很完善！
现在，让我们深入了解实际代码，使用此软件包创建一个组件！
import React from "react";
import {
GoogleMap,
useJsApiLoader,
Marker,
InfoWindow
} from "@react-google-maps/api";
type OfficeNode = {
id: string;
field_address: {
locality: string;
postal_code: string;
address_line1: string;
address_line2: string;
latitude: number;
longitude: number;
};
};
export default function App() {
const offices = [
{
id: "1",
field_address: {
locality: "Gent",
postal_code: "9000",
address_line1: "Veldstraat 1",
address_line2: "a",
latitude: 51.053589,
longitude: 3.72242
}
},
{
id: "2",
field_address: {
locality: "Brussel",
postal_code: "1000",
address_line1: "Nieuwstraat 1",
address_line2: "a",
latitude: 50.85061,
longitude: 4.35403
}
},
{
id: "3",
field_address: {
locality: "Antwerpen",
postal_code: "2000",
address_line1: "Meir 1",
address_line2: "a",
latitude: 51.21878,
longitude: 4.40559
}
}
];
const mapRef = React.useRef<any>(null);
const [selectedOffice, setSelectedOffice] = React.useState<
OfficeNode | undefined | null
>(null);
const { isLoaded } = useJsApiLoader({
id: "google-map-script",
googleMapsApiKey: "ENTER-YOUR-API-KEY-HERE"
});
const onLoad = React.useCallback(
(mapInstance) => {
const bounds = new google.maps.LatLngBounds();
offices.forEach((office) => {
bounds.extend(
new google.maps.LatLng(
office.field_address.latitude,
office.field_address.longitude
)
);
});
mapRef.current = mapInstance;
mapInstance.fitBounds(bounds);
},
[offices]
);
const onClickMarker = (officeId: string) => {
setSelectedOffice(offices.find((office) => office.id === officeId));
};
return (
<div className="App">
<h1>Google maps + React</h1>
{isLoaded ? (
<>
<GoogleMap
mapContainerClassName="c-office-overview__map"
onLoad={onLoad}
>
{offices.map((office) => (
<Marker
key={office.id}
onClick={() => onClickMarker(office.id)}
position={{
lat: office.field_address.latitude,
lng: office.field_address.longitude
}}
/>
))}
{selectedOffice ? (
<InfoWindow
position={{
lat: selectedOffice.field_address.latitude,
lng: selectedOffice.field_address.longitude
}}
onCloseClick={() => setSelectedOffice(null)}
>
<p>
{selectedOffice.field_address.address_line1}{" "}
{selectedOffice.field_address.address_line2} -{" "}
{selectedOffice.field_address.postal_code}{" "}
{selectedOffice.field_address.locality}
</p>
</InfoWindow>
) : null}
</GoogleMap>
</>
) : null}
</div>
);
}
好，我们来看看这里发生了什么。
我们从库中导入所需的各种组件，并选择所需的库（仅选择此演示所需的库）。
完成这些步骤后，我们可以使用 useRef hook 创建一个 Ref，它将用于存储对 Google Maps 地图的引用。
然后，我们使用useJsApiLoader钩子初始化 Google Maps API，并传递 API 密钥。
从钩子的响应中，我们可以获取一个isLoaded布尔值，该值将用于在渲染中显示/隐藏地图。
我们还需要创建一个onLoad函数（封装在 useCallback 钩子中），Google Maps API 初始化完成后会调用此函数。
在这个函数中，我们将遍历所有办公室，并将位置添加到 Google 地图的边界中，以确保地图正确居中，并将 Google Maps 实例分配给我们之前创建的 Ref。
isLoaded我们的渲染过程非常简单直接。当布尔值为真时，我们就渲染地图。
我们为每个办公室渲染一个标记，并添加一个 onClick 监听器，以便在点击标记时选中相应的办公室。
代码中还包含一个检查，用于判断是否selectedOffice选中某个办公室后，要使用谷歌地图的信息窗口显示该办公室的一些详细信息。
点击关闭按钮后，信息窗口selectedOffice将被清除。
就这些啦！
希望这篇文章对你有帮助。
我可能会写一篇后续文章，讲解如何使用谷歌地图搜索地址，以及如何查找离地址最近的办事处。文章还会介绍如何使用浏览器内置的地理定位API。
如果你感兴趣，请留言 :-)
源代码可以在Codesandbox上找到（你仍然需要输入 Google Maps API 密钥，我不能提供我的密钥，因为我会被收费 :D）
文章来源：https://dev.to/thomasledoux1/easy-way-to-integrate-google-maps-in-react-1j6j