在react原生地图上显示用户位置

import React, { useState, useEffect } from 'react';
import ReactMapGL, { Marker } from 'react-map-gl';

const MapComponent = () => {
  const [viewport, setViewport] = useState({
    width: '100%',
    height: '400px',
    latitude: 37.7577, // 默认纬度
    longitude: -122.4376, // 默认经度
    zoom: 10 // 默认缩放级别
  });

  useEffect(() => {
    // 获取用户位置信息
    navigator.geolocation.getCurrentPosition(
      position => {
        const { latitude, longitude } = position.coords;
        setViewport(prevViewport => ({
          ...prevViewport,
          latitude,
          longitude
        }));
      },
      error => {
        console.error('Error getting user location', error);
      }
    );
  }, []);

  return (
    <ReactMapGL
      {...viewport}
      mapboxApiAccessToken={YOUR_MAPBOX_ACCESS_TOKEN}
      onViewportChange={newViewport => setViewport(newViewport)}
    >
      {/* 在地图上显示用户位置 */}
      <Marker latitude={viewport.latitude} longitude={viewport.longitude}>
        <div>您的位置</div>
      </Marker>
    </ReactMapGL>
  );
};

export default MapComponent;