当前位置：首页 > React

react 实现定位

2026-01-26 12:21:43React

使用Geolocation API实现定位

React应用中可以通过浏览器内置的Geolocation API获取用户位置信息。需要先检查浏览器兼容性，再调用相关方法。

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

const LocationComponent = () => {
  const [location, setLocation] = useState({
    latitude: null,
    longitude: null,
    error: null
  });

  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          setLocation({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            error: null
          });
        },
        (error) => {
          setLocation(prev => ({
            ...prev,
            error: error.message
          }));
        }
      );
    } else {
      setLocation(prev => ({
        ...prev,
        error: "Geolocation is not supported by this browser."
      }));
    }
  }, []);

  return (
    <div>
      {location.error ? (
        <p>Error: {location.error}</p>
      ) : (
        <p>
          Latitude: {location.latitude}, Longitude: {location.longitude}
        </p>
      )}
    </div>
  );
};

使用第三方地图服务库

对于更复杂的地图功能，可以集成如Google Maps API或Mapbox等第三方服务。这些服务通常提供React专用组件。

react 实现定位

以react-google-maps/api为例：

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

const MapContainer = () => {
  const [currentPosition, setCurrentPosition] = useState(null);

  const success = position => {
    setCurrentPosition({
      lat: position.coords.latitude,
      lng: position.coords.longitude
    });
  };

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(success);
  }, []);

  const mapStyles = {
    height: "400px",
    width: "100%"
  };

  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      {currentPosition && (
        <GoogleMap
          mapContainerStyle={mapStyles}
          zoom={13}
          center={currentPosition}
        >
          <Marker position={currentPosition} />
        </GoogleMap>
      )}
    </LoadScript>
  );
};

处理权限和错误情况

定位功能需要用户授权，应妥善处理各种权限状态和错误情况。可以添加更完善的错误处理和重试机制。

react 实现定位

const handleLocationAccess = () => {
  navigator.permissions.query({name: 'geolocation'}).then(result => {
    if (result.state === 'granted') {
      // 已授权
    } else if (result.state === 'prompt') {
      // 等待用户响应
    } else if (result.state === 'denied') {
      // 被拒绝，显示引导说明
    }
    result.onchange = () => {
      // 权限状态变化处理
    };
  });
};

移动端优化

在移动设备上，定位功能可能表现不同。可以添加超时设置和更精确的位置获取选项。

navigator.geolocation.getCurrentPosition(
  successCallback,
  errorCallback,
  {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  }
);

反向地理编码

获取坐标后，通常需要转换为可读的地址信息。可以使用Google Maps Geocoding API或其他服务。

const geocodePosition = async (lat, lng) => {
  const response = await fetch(
    `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=YOUR_API_KEY`
  );
  const data = await response.json();
  return data.results[0].formatted_address;
};

标签: react