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.
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
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ê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 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;
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;
Để 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
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.