React 简便获取经纬度

以下是关于React获取定位经纬度的代码解释：

import React, { useEffect, useState } from 'react';

const LocationComponent = () => {
  const [latitude, setLatitude] = useState(null);
  const [longitude, setLongitude] = useState(null);

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        setLatitude(position.coords.latitude);
        setLongitude(position.coords.longitude);
      },
      (error) => {
        console.error(error);
      }
    );
  }, []);

  return (
    

      {latitude && longitude ? (
        
经度: {longitude}, 纬度: {latitude}
      ) : (
        
正在获取位置信息...
      )}
    
  );
};

export default LocationComponent;

• import React, { useEffect, useState } from ‘react’; 导入React库中的React对象以及useEffect和useState钩子函数。
• const LocationComponent = () => { … } 创建一个名为LocationComponent的函数式组件。
• const [latitude, setLatitude] = useState(null); 使用useState钩子函数创建一个名为latitude的状态变量，并设置初始值为null。setLatitude是用于更新latitude状态的函数。
• const [longitude, setLongitude] = useState(null); 使用useState钩子函数创建一个名为longitude的状态变量，并设置初始值为null。setLongitude是用于更新longitude状态的函数。
• useEffect(() => { … }, []); 使用useEffect钩子函数，在组件渲染时执行副作用代码。空数组作为第二个参数，表示只在组件挂载时执行一次。
• navigator.geolocation.getCurrentPosition(…) 使用浏览器的Geolocation API获取当前位置信息。
• (position) => { … } 定义一个回调函数，当成功获取位置信息时被调用。position参数包含了经纬度等信息。
• setLatitude(position.coords.latitude); 更新latitude状态变量为获取到的纬度值。
• setLongitude(position.coords.longitude); 更新longitude状态变量为获取到的经度值。
• (error) => { console.error(error); } 定义一个回调函数，当获取位置信息失败时被调用。error参数包含了错误信息。
• {latitude && longitude ? ( … ) : ( … )} 使用条件渲染语法，如果latitude和longitude都有值，则渲染经纬度信息，否则渲染正在获取位置信息的提示。

• 经度: {longitude}, 纬度: {latitude}

  显示经纬度信息。

• 正在获取位置信息...

  显示正在获取位置信息的提示。
• export default LocationComponent; 导出LocationComponent组件，使其可以在其他地方被引用和使用。

请注意，这段代码使用了React的函数式组件和Hooks特性，以及浏览器的Geolocation API来获取位置信息。