在 React JS 中创建地图，无需使用第三方 API

在本文中，我们将创建一个 React 应用，它将在不使用任何第三方 API 的情况下显示地图。您可以编辑地图的宽度和高度，向其添加标记，以及执行更多其他操作。我们将使用 **pigeon-maps** 包来创建地图。所以，让我们开始吧。

示例

首先创建一个 React 项目 -

npx create-react-app tutorialpurpose

现在进入项目目录 -

cd tutorialpurpose

下载并安装 **pigeon-maps** 包 -

npm install --save pigeon-maps

我们将使用此包在 React 项目中添加与库一起下载的默认地图。

在 **App.js** 中添加以下代码行 -

import React from "react";
import { Map, Marker } from "pigeon-maps";

export default function App() {
   return (
      <Map height={300} defaultCenter={[17.3850, 78.4867]} defaultZoom={11}>
         <Marker width={50} anchor={[17.3850, 78.4867]} />
      </Map>
   );
}

解释

  • 此代码块将创建一个以 **defaultCenter** 为中心的地图，并定义缩放比例。

  • 在 **Map** 组件内部，我们使用 **Marker** 来标记给定的位置。

  • 在这里，我们通过提供其地理坐标作为参数，将 **defaultCenter** 设置在 **印度海德拉巴**。

输出

执行后，它将产生以下输出 -

更新于: 2021年9月29日

511 次浏览

启动您的 职业生涯

通过完成课程获得认证

开始学习
广告