如何使用 ReactJS 创建位置查找器应用程序？

在本文中，我们将构建一个位置查找器应用程序，让您可以在地图上搜索不同的地点。我们的应用程序包含两个部分，一个用于在地图上显示标记，另一个用于搜索不同的地方。为了渲染地图并获取搜索位置的坐标，我们将使用 Mapbox。通过本文，我们还将学习如何在 React 中使用 Mapbox。

先决条件：该项目的先决条件是：

• 反应
• 功能组件
• 反应钩子
• 反应 Axios 和 API
• Javascript ES6

创建一个 React 应用程序并安装一些 npm 包：

第 1 步：通过在终端中键入以下命令来创建一个反应应用程序：

npx create-react-app location-finder

第 2 步：现在，通过运行以下命令转到项目文件夹，即 location-finder：

cd location-finder

第 3 步：让我们安装此项目所需的一些 npm 包：

npm install react-map-gl
npm install axios
npm install react-icons

项目结构：它看起来像这样：

示例：让我们获取该项目所需的 Mapbox API 密钥。请按照以下简单步骤操作：

• 访问网站：https://www.mapbox.com/ 并创建一个免费帐户。
• 转到您的帐户仪表板，在页面底部，您将找到一个名为“访问令牌”的部分。

• 复制默认的公共访问令牌并将其保存在某处以供以后使用。

现在在App.js组件中，我们将使用react-map-gl包导入地图。在地图内部，我们将使用一个标记通过坐标精确定位确切的位置，还有一个搜索框，用户可以在其中输入任何城市/位置名称。有关react-map-gl 的更多信息，请访问他们的官方 https://visgl.github.io/react-map-gl/。现在在 App.js 组件中写下以下代码。

请记住将 替换为您自己的 Mapbox 公共访问令牌。

App.js

import { useEffect, useState } from "react";
import ReactMapGL, { Marker, FlyToInterpolator }
      from "react-map-gl";
import Fly from "./Components/Fly";
import { ImLocation } from "react-icons/im";
import "./App.css";
  
function App() {
  
  // Setting up the state for the latitude
  // and longitude
  const [lat, setLat] = useState(22.5726);
  const [lon, setLon] = useState(88.3639);
  
  // Setting up the state for the map
  const [viewport, setViewport] = useState({
    latitude: lat,
    longitude: lon,
    zoom: 12,
    bearing: 0,
    pitch: 0,
    width: "100%",
    height: "100vh",
  });
  
  // Map viewport updates whenever the
  // latitude and longitude changes
  useEffect(() => {
    setViewport({
      latitude: lat,
      longitude: lon,
      zoom: 12,
      transitionInterpolator: 
        new FlyToInterpolator({ speed: 1.0 }),
      transitionDuration: "auto",
      width: "100%",
      height: "100vh",
    });
  }, [lat, lon]);
  
  return (
    "}
      {...viewport}
      onViewportChange={(viewport) => setViewport(viewport)}
    >
      
        
      
      
    
  );
}
  
export default App;

在 App.js 组件中，我们还导入了我们自己的名为“Fly”的自定义组件，它只是一个接受用户输入的简单框，调用转发地理编码 API（https://docs.mapbox.com/api/search /geocoding/) 由 Mapbox 本身提供，并相应地设置坐标。让我们创建那个组件。

在src文件夹下创建一个名为“ Components ”的文件夹，并在该文件夹下创建一个名为“ Fly.jsx ”的文件

文件名：Fly.jsx现在在 Fly.jsx 文件中写下以下代码。

Fly.jsx

import React, { useState } from "react";
import Axios from "axios";
  
const API_KEY = "";
  
const Fly = ({ setLat, setLon }) => {
  
  // Setting up the state variable to store user input
  const [city, setCity] = useState("Kolkata");
  
  // Function to call the API and set the
  // coordinates accordingly
  function getCoordinates() {
    Axios.get(
      `https://api.mapbox.com/geocoding/v5/
        mapbox.places/${city}.json?access_token=${API_KEY}`
    ).then((res) => {
  
      // Longitude
      setLon(res.data.features[0].geometry.coordinates[0]);
        
      // Latitude
      setLat(res.data.features[0].geometry.coordinates[1]);
    });
  }
  
  return (
    

      
Enter a city name
      

         {
            setCity(e.target.value);
          }}
        />
         getCoordinates()}>Go
      
    
  );
};
  
export default Fly;

请记住将 替换为您自己的 Mapbox 公共访问令牌。

文件名：App.css现在让我们编辑名为App.css的文件来为我们的应用设置样式。

应用程序.css

.fly {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 100px;
  color: white;
  background-color: #3061e7;
  margin-top: 1%;
  margin-left: 40%;
  padding: 10px;
  border-radius: 5px;
}
.fly input {
  padding-left: 5px;
  font-size: 18px;
  height: 30px;
}
.fly button {
  cursor: pointer;
  width: 50px;
}

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：