react高德地图定位到当前位置

在React应用中使用高德地图进行实时定位，首先需要安装`react-amap`库，它是React版的高德地图组件。以下是一个简单的步骤说明：

1. **安装依赖**:
使用npm或yarn安装`react-amap`和`amap-jsapi-loader`：

   npm install react-amap amap-jsapi-loader @types/react-amap --save
   # 或者
   yarn add react-amap amap-jsapi-loader @types/react-amap

2. **引入模块**:
在`.js`文件中导入相关的组件和样式：

   import React from 'react';
   import { Map, Marker, Geolocation } from 'react-amap';
   import 'amap/dist/amap.css';

3. **配置API key**:
需要在项目中添加高德地图API Key，通常是在入口文件或配置文件中设置。

4. **获取用户位置**:
使用`Geolocation`组件获取当前地理位置：

   const onLocationChange = (location) => {
     console.log('Current location:', location);
     // 更新地图中心点和marker的位置
     setCenterAndMarker(location);
   };

   useEffect(() => {
     if (!navigator.geolocation) {
       alert('当前浏览器不支持地理定位');
       return;
     }
     navigator.geolocation.getCurrentPosition(onLocationChange);
   }, []);

5. **创建位置组件**:
创建一个包含地图、标记和定位功能的自定义组件：

   const MyMap = () => {
     const [center, setCenter] = useState(null); // 地图中心点
     const [marker, setMarker] = useState(null); // 标记

     const centerAndMarker = ({ latitude, longitude }) => {
       setCenter({ lat: latitude, lng: longitude });
       setMarker({ position: { lat: latitude, lng: longitude } });
     };

     return (
       <Map zoom={10} center={center}>
         {marker && <Marker position={marker.position} />}
         <Geolocation onLocationChange={onLocationChange} />
       </Map>
     );
   };

6. **在App中使用**:
现在可以在`App`组件或其他需要地图定位的地方使用这个`MyMap`组件。

function App() {
  return (
    <div className="App">
      <MyMap />
    </div>
  );
}