如何使用 React 将 Google 地图添加到你的 Web 应用

大家好！

如果您想将 Google 地图集成到您的 Web 应用程序中，那么本文正适合您。我将尽力详细解释每个步骤，以便各个年龄段的开发者都能理解。

其次，确定要为 Google 地图使用哪个框架/库。我选择了@vis.gl/react-google-maps。Google 地图平台团队提供了这个库，所以我想用它。

安装 react-google-maps

要安装此库，您可以使用以下命令：



npm install @vis.gl/react-google-maps

或者



yarn add @vis.gl/react-google-maps

创建 Google 地图 API 密钥

转到Google 开发者控制台，创建一个“新项目”并为您的项目选择一个名称。
从左侧菜单转到“API 和服务”，然后选择“凭据”屏幕。
点击“创建凭证”，选择生成“API密钥”。
API 密钥很快就会出现在屏幕上。将其复制并粘贴到你的 .env 文件中。

创建地图组件

现在创建一个名为的新文件并在其中CustomMap.js定义组件，如下所示：<Map/>



import "./App.css";
import React, { useState } from "react";
import { Map, Marker} from "@vis.gl/react-google-maps";

const CustomMap = () => {
  // shows marker on London by default
  const [markerLocation, setMarkerLocation] = useState({
    lat: 51.509865,
    lng: -0.118092,
  });

  return (
    <div className="map-container">
      <Map
        style={{ borderRadius: "20px" }}
        defaultZoom={13}
        defaultCenter={markerLocation}
        gestureHandling={"greedy"}
        disableDefaultUI
      >
        <Marker position={markerLocation} />
      </Map>
    </div>
  );
}

export default CustomMap;

并给出样式以在屏幕中央显示地图：



.app {
  display: flex;
  padding: 5rem;
  justify-content: space-evenly;
  font-family: Verdana, Geneva, Tahoma, sans-serif
}

.map-container {
  height: 500px;
  width: 50%;
  border: 2px solid black;
  border-radius: 20px;
}

设置 Google Maps API 的上下文

最后，设置 Google Maps API 密钥的上下文以提供对我们<CustomMap />组件的访问。



import React from "react";
import CustomMap from "./CustomMap";
import { APIProvider } from "@vis.gl/react-google-maps";
import "./App.css";

const App = () => {
  return (
    <div className="app">
      <APIProvider apiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}>
        <CustomMap />
      </APIProvider>
    </div>
  );
};

export default App;

此设置将在您的网络应用程序上呈现地图。

下一篇文章我会分享如何在地图上添加点击功能。

感谢您的阅读！欢迎通过LinkedIn或GitHub与我联系。

鏂囩珷鏉ユ簮锛�https://dev.to/aneeqakhan/how-to-add-google-maps-to-your-web-app-using-react-3c3e