📌  相关文章
📜  在 React js 中添加谷歌地图 - Javascript (1)

📅  最后修改于: 2023-12-03 14:51:09.512000             🧑  作者: Mango

在 React.js 中添加谷歌地图 - JavaScript

本文将介绍如何在 React.js 应用中添加谷歌地图。我们将使用 JavaScript 编写代码。

步骤
步骤 1: 安装必要的依赖

运行以下命令来安装 google-maps-react 库，它是用来在 React.js 中展示谷歌地图的工具库。

npm install google-maps-react
步骤 2: 导入依赖

在你的 React.js 组件文件中，导入 Map 和 Marker 组件。

import React from "react";
import { Map, Marker } from "google-maps-react";
步骤 3: 创建地图组件

在你的组件类中，创建一个包含谷歌地图和标记的组件。

class MapContainer extends React.Component {
  render() {
    return (
      <Map
        google={window.google}
        zoom={14}
        initialCenter={{ lat: 37.7749, lng: -122.4194 }}
      >
        <Marker position={{ lat: 37.7749, lng: -122.4194 }} />
      </Map>
    );
  }
}

在 Map 组件中，我们设置了 google 属性，它的值为全局的 window.google 对象。我们还设置了初始缩放级别和中心位置。在 Map 组件内，我们放置了一个 Marker 组件，它代表了地图上的一个标记点。

步骤 4: 渲染地图组件

在你的应用的根组件中，渲染地图组件。

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>我的谷歌地图</h1>
        <MapContainer />
      </div>
    );
  }
}

export default App;

我们在根组件中渲染了一个简单的标题和 MapContainer 组件。

步骤 5: 设置 API 密钥

在 public/index.html 文件中，将以下代码添加到 <head> 标签中，替换 YOUR_API_KEY 为你的谷歌地图 API 密钥。

<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"
  async
  defer
></script>

这将加载谷歌地图 API，并把 API 密钥传递给它。

总结

通过按照以上步骤，在 React.js 应用中添加谷歌地图。你可以根据需求来自定义地图的样式和标记。记得设置合适的 API 密钥，以便能够正确加载地图。

希望本文能帮助你成功在 React.js 中添加谷歌地图！