当前位置：首页 > React

react怎么实现定位

2026-01-26 22:35:51React

在React中实现定位功能

使用React实现定位功能通常涉及浏览器内置的Geolocation API。以下是实现方法：

获取用户当前位置

navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log("Latitude:", position.coords.latitude);
    console.log("Longitude:", position.coords.longitude);
  },
  (error) => {
    console.error("Error getting location:", error.message);
  }
);

实时位置跟踪

const watchId = navigator.geolocation.watchPosition(
  (position) => {
    console.log("Updated position:", position.coords);
  },
  (error) => {
    console.error("Error watching position:", error.message);
  }
);

// 停止监听
// navigator.geolocation.clearWatch(watchId);

React组件实现示例

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

function LocationTracker() {
  const [location, setLocation] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (navigator.geolocation) {
      const watchId = navigator.geolocation.watchPosition(
        (position) => {
          setLocation({
            lat: position.coords.latitude,
            lng: position.coords.longitude
          });
        },
        (err) => {
          setError(err.message);
        }
      );

      return () => navigator.geolocation.clearWatch(watchId);
    } else {
      setError("Geolocation is not supported by this browser.");
    }
  }, []);

  return (
    <div>
      {error && <p>Error: {error}</p>}
      {location && (
        <p>
          Latitude: {location.lat}, Longitude: {location.lng}
        </p>
      )}
    </div>
  );
}

权限处理

现代浏览器要求获取位置权限，需要在HTTPS环境下工作（localhost除外）。用户首次访问时会看到权限请求弹窗。

错误处理常见情况

PERMISSION_DENIED: 用户拒绝位置共享
POSITION_UNAVAILABLE: 无法获取位置
TIMEOUT: 获取位置超时
旧版浏览器可能不支持Geolocation API

地图集成

获取坐标后，可以集成地图库如Google Maps或Mapbox显示位置：

react怎么实现定位

import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';

function MapDisplay({ location }) {
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        mapContainerStyle={{ width: '100%', height: '400px' }}
        center={location}
        zoom={15}
      >
        <Marker position={location} />
      </GoogleMap>
    </LoadScript>
  );
}