在 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 。
输出结果
在执行时,它将产生以下输出 -
以上是 在 React JS 中创建地图而不使用第三方 API 的全部内容, 来源链接: utcz.com/z/363157.html