如何使用ReactJ使用地理位置API-DEV365 开发者社区

地理位置用于查找网络设备的当前位置。它可以用于Google Maps，Uber，TripAdvisor等应用程序中。

在ReactJ中，我们可以使用JavaScript地理位置API找到用户的当前地理位置。

注意：少数几个可以运行HTML 5的Broswers支持地理位置API，例如Google Chrome，Opera，Edge等。

现在，我们将查看我们需要遵循的步骤，以便使用地理位置API并找到用户的纬度和经度坐标。

首先，我们需要导入反应以及将在本实现中使用的所需库。我们将使用Usestate React Hook来管理存储用户地理位置的变量。我们将在程序开始时添加以下行以包括这些库和方法。

import React, { useState } from 'react';

我们将为我们的React项目声明一个称为App（）的组件函数，该函数将加载应用程序页面。在那里，我们将包含所有地理位置方法。
我们将为我们的React项目声明一个称为App（）的组件函数，该函数将加载应用程序页面。在那里，我们将包装所有地理位置方法。

const [userLocation, setUserLocation] = useState(null);

下一步是定义一个函数，以相应地查找用户的地理位置并相应地更新用户定位变量。我们将使用下面显示的箭头功能。

const getUserLocation = () => { /*insert code here*/ };

在此getUserlocation功能中，我们现在将添加所有查找用户地理位置的方法。首先，我们将检查地理位置功能是否由用户的浏览器支持。如果其他语句包含navigator.geolocation函数，我们将使用简单的语句。

if (navigator.geolocation) {
    // what to do if supported
}
else {
    // display an error if not supported
    console.error('Geolocation is not supported by this browser.');
}

现在，如果Navigator.Geolocation方法由用户的浏览器支持，我们需要处理该怎么办。我们需要检索用户的位置。为此，我们使用navigator.geolocation.getCurrentPosition（）函数。

navigator.geolocation.getCurrentPosition(
    (position) => {
        // what to do once we have the position
    },
    (error) => {
        // display an error if we cant get the users position
        console.error('Error getting user location:', error);
    }
);

一旦我们拥有用户的位置，我们现在可以使用它来找到用户的坐标和其他相关数据。为了访问位于位置变量中的坐标，我们可以使用poisiton.coords方法。现在，我们将创建两个变量来存储这些坐标供以后使用。

const { latitude, longitude } = position.coords;

一旦我们访问了用户的坐标，我们现在将通过调用setUserLocation（）函数来更新我们的用户location变量。

setUserLocation({ latitude, longitude });

现在我们已经存储了用户的位置坐标，我们的下一个工作是渲染一个HTML，将用户的坐标反映到网页上。为此，我们将包括一个按钮，然后单击它，我们将调用getUserLocation函数并更新UserLocation变量。

<button onClick={getUserLocation}>Get User Location</button>

如果我们成功检索了用户位置，我们还必须显示用户位置。为此，我们将使用A &&语句与用户Location变量一起使用，该变量包含所有HTML代码以打印用户的坐标。一旦UserLocation变量更新，它就不再是空值，并且该语句现在为TRUE；因此，它显示坐标。

{userLocation && (
    <div>
        <h2>User Location</h2>
        <p>Latitude: {userLocation.latitude}</p>
        <p>Longitude: {userLocation.longitude}</p>
    </div>
)}

现在，我们已经完成了我们需要遵循的所有步骤来检索用户的地理位置，我们现在将所有步骤组合到一个文件中。

完整的源代码

// import the required react libraries
import React, { useState } from 'react';

function App() {
  // const variable array to save the users location
  const [userLocation, setUserLocation] = useState(null);

  // define the function that finds the users geolocation
  const getUserLocation = () => {
    // if geolocation is supported by the users browser
    if (navigator.geolocation) {
      // get the current users location
      navigator.geolocation.getCurrentPosition(
        (position) => {
          // save the geolocation coordinates in two variables
          const { latitude, longitude } = position.coords;
          // update the value of userlocation variable
          setUserLocation({ latitude, longitude });
        },
        // if there was an error getting the users location
        (error) => {
          console.error('Error getting user location:', error);
        }
      );
    }
    // if geolocation is not supported by the users browser
    else {
      console.error('Geolocation is not supported by this browser.');
    }
  };

  // return an HTML page for the user to check their location
  return (
    <div>
      <h1>Geolocation App</h1>
      {/* create a button that is mapped to the function which retrieves the users location */}
      <button onClick={getUserLocation}>Get User Location</button>
      {/* if the user location variable has a value, print the users location */}
      {userLocation && (
        <div>
          <h2>User Location</h2>
          <p>Latitude: {userLocation.latitude}</p>
          <p>Longitude: {userLocation.longitude}</p>
        </div>
      )}
    </div>
  );
}

export default App;

如果您想使用打字稿，请在此处源代码

"use client"

import React, { useState } from "react";

export default function TestGeolocation() {
  const [userLocation, setUserLocation] = useState<{
    latitude: number;
    longitude: number;
  } | null>(null);

  const getUserLocation = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const { latitude, longitude } = position.coords;

          setUserLocation({ latitude, longitude });
        },

        (error) => {
          console.error("Error get user location: ", error);
        }
      );
    } else {
      console.log("Geolocation is not supported by this browser");
    } 
  };

  return (
    <>
      <h1>Geolocation App</h1>
      {/* create a button that is mapped to the function which retrieves the users location */}
      <button onClick={getUserLocation}>Get User Location</button>
      {/* if the user location variable has a value, print the users location */}
      {userLocation && (
        <div>
          <h2>User Location</h2>
          <p>Latitude: {userLocation.latitude}</p>
          <p>Longitude: {userLocation.longitude}</p>
        </div>
      )}
    </>
  );
}