在 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 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告