在 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 。

输出结果

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