react 高德地图 点位动效

在 React 中使用高德地图实现点位动效，你可以使用 react-amap 库来集成高德地图的功能。下面是一个简单的示例代码：

首先，安装 react-amap 库：

npm install react-amap

然后，创建一个地图组件并在其中添加动态效果的标记点：

import React, { useEffect, useState } from 'react';
import { Map, Marker } from 'react-amap';

const MapComponent = () => {
  const [markers, setMarkers] = useState([]);

  useEffect(() => {
    // 模拟获取标记点数据
    const fetchData = async () => {
      const response = await fetch('https://your-api-endpoint');
      const data = await response.json();
      
      // 更新标记点数组
      setMarkers(data);
    };

    fetchData();
  }, []);

  return (
    <Map center={[longitude, latitude]} zoom={15}>
      {markers.map((marker, index) => (
        <Marker
          key={index}
          position={marker.position}
          animation="AMAP_ANIMATION_DROP"
        />
      ))}
    </Map>
  );
};

export default MapComponent;

在上面的示例代码中，我们使用了 `react-amap` 的 `Map` 和 `Marker` 组件。通过 `useState` 来保存标记点的数据，并通过 `useEffect` 来异步获取数据。在地图中遍历每个标记点，并设置 `animation` 属性为 `"AMAP_ANIMATION_DROP"` 来实现动态掉落的效果。