Morioh
Login
CODE VN

CODE VN

6 months ago

Cách tìm vị trí gần nhất bằng API định vị địa lý trong React

API vị trí địa lý là công nghệ web cho phép các trang web và ứng dụng web truy cập thông tin vị trí của người dùng. Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tìm và hiển thị vị trí hiện tại hoặc gần nhất bằng vĩ độ và kinh độ trong ứng dụng React.js. Chúng tôi sẽ cài đặt và sử dụng thư viện mã địa lý phản ứng cũng như API JavaScript định vị địa lý để lấy vị trí địa lý của người dùng hiện tại trong React.

Mục lục

  • Bước 1: Tải xuống React Framework
  • Bước 2: Cài đặt gói React Geocode
  • Bước 3: Xây dựng thành phần chức năng
  • Bước 4: Nhận vị trí gần nhất trong React
  • Bước 9: Đăng ký thành phần mới
  • Bước 10: Khởi động máy chủ React

Bước 1: Tải xuống React Framework

Việc đầu tiên bắt đầu bằng việc tải xuống một khung React mới; bạn phải xây dựng một dự án React mới bằng ứng dụng tạo phản ứng.

npx create-react-app react-demo

Điều hướng đến thư mục dự án:

cd react-demo

Bước 2: Cài đặt gói React Geocode

Trong bước này, bạn sẽ thực thi lệnh được đề xuất và cài đặt thư viện mã địa lý React.

npm install react-geocode --legacy-peer-deps

Bước 3: Xây dựng thành phần chức năng

Bên trong thư mục src/, bạn sẽ phải tạo thư mục features/, sau đó xác định thành phần LocationComp bằng cách thêm mã đã cho vào tệp LocationComp.js.

import React from 'react'
function LocationComp() {
  return (
    <div></div>
  )
}
export default LocationComp

Bước 4: Nhận vị trí gần nhất trong React

Ở bước trước, chúng tôi đã tạo một thành phần hoàn toàn mới để truy xuất dữ liệu vị trí; điều hướng đến tệp features/LocationComp.js và thêm tất cả mã đã cho vào tệp.

import React, { useEffect, useState } from "react";
import Geocode from "react-geocode";
// set Google Maps Geocoding API for purposes of quota management. Its optional but recommended.
Geocode.setApiKey("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
function LocationComp() {
  const [placename, setPlaceName] = useState(null);
  const [error, setError] = useState("");
  const geolocationAPI = navigator.geolocation;
  useEffect(() => {
    if (!geolocationAPI) {
      setError("Geolocation API is not available in your browser!");
    } else {
      Geocode.fromLatLng("48.8583701", "2.2922926").then(
        (response) => {
          const address = response.results[0].formatted_address;
          let city;
          for (let i = 0; i < response.results[0].address_components.length; i++) {
            for (let j = 0; j < response.results[0].address_components[i].types.length; j++) {
              switch (response.results[0].address_components[i].types[j]) {
                case "locality":
                  city = response.results[0].address_components[i].long_name;
                  break;
              }
            }
          }
          setPlaceName(city);
        },
        (error) => {
          console.error(error);
        }
      );
      
    }
  }, []);
  return (
    <>
      <h4>Your coordinates are: {placename}</h4>
    </>
  );
}
export default LocationComp;

Bước 9: Đăng ký thành phần mới

Trong React, tệp App.js lý tưởng là điểm vào chính cho ứng dụng của chúng ta. Đó là nơi chúng ta sẽ đăng ký thành phần vị trí.

Bạn có thể thêm mã sau vào tệp src/App.js.

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import LocationComp from "./features/LocationComp";
function App() {
  return (
    <div className="container mt-3">
      <h2 className="mb-3">React Show Current User Location Example</h2>
      <LocationComp />
    </div>
  );
}
export default App;

Bước 10: Khởi động máy chủ React

Để khởi động máy chủ phát triển, hãy điều hướng đến thư mục dự án React của bạn. Thực hiện lệnh đã cho và mở ứng dụng bằng url đã cho.

npm start
http://localhost:3000

Phần kết luận

Trong hướng dẫn này, chúng ta đã học cách tìm vị trí hiện tại và gần nhất bằng vĩ độ và kinh độ trong ứng dụng React js.

1.55 GEEK