如何为React Leaflet的Marker组件应用SmoothMarkerBouncing弹跳动画

这个需求完全可以实现，下面分两种常用方案说明：

方案1：使用SmoothMarkerBouncing插件实现弹跳效果 #

步骤1：安装依赖 #

npm install leaflet.smoothmarkerbouncing
# 或者用yarn
yarn add leaflet.smoothmarkerbouncing

步骤2：引入插件 #

在你的地图组件文件顶部引入插件，注意要先引入leaflet再引入该插件：

import L from 'leaflet';
import 'leaflet.smoothmarkerbouncing';

步骤3：给目标Marker添加动画 #

通过React Leaflet Marker的ref属性可以拿到原生Leaflet Marker实例，调用插件提供的bounce()方法即可开启动画，你可以根据数据字段判断哪些Marker需要高亮：

<>
  <MapContainer
    center={[startLat, startLen]}
    {/* 其余原有props */}
  >
    <TileLayer
      url={`...`}
      attribution='...'
    />

    {data?.length > 0 &&
      data.map((item) => {
        // 可自定义判断条件，比如item.isHighlight为true时添加动画
        const needAnimate = item.isHighlight;
        return (
          <Marker
            key={item.name}
            position={[item.lat, item.lang]}
            ref={(markerRef) => {
              if (markerRef && needAnimate) {
                // 拿到原生marker实例，开启弹跳
                const leafletMarker = markerRef.leafletElement;
                leafletMarker.bounce();
                // 可自定义弹跳参数，比如：
                // leafletMarker.bounce({ duration: 1000, height: 20 });
              }
            }}
            {/* 其余原有props */}
          >
          </Marker>
        );
      })}
  </MapContainer>
</>

如果需要停止动画，调用leafletMarker.stopBouncing()即可。

方案2：纯CSS实现高亮动画（更简便，无需额外插件） #

如果不想引入额外插件，可以直接给Marker自定义带CSS动画的图标，实现脉冲、缩放、弹跳等效果：

步骤1：定义带动画的CSS #

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); box-shadow: 0 0 10px rgba(255,0,0,0.7); }
  100% { transform: scale(1); }
}

.highlight-marker {
  animation: pulse 1.5s infinite ease-in-out;
}

步骤2：给目标Marker使用自定义图标 #

// 先定义普通图标和高亮图标
const defaultIcon = new L.Icon({
  iconUrl: '/path/to/default-marker.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41]
});

const highlightIcon = new L.Icon({
  iconUrl: '/path/to/highlight-marker.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  className: 'highlight-marker' // 绑定动画类
});

// 渲染时判断使用哪个图标
{data?.length > 0 &&
  data.map((item) => {
    return (
      <Marker
        key={item.name}
        position={[item.lat, item.lang]}
        icon={item.isHighlight ? highlightIcon : defaultIcon}
        {/* 其余原有props */}
      >
      </Marker>
    );
  })}

这种方式轻量化，自定义程度高，完全可以满足突出显示的需求。

内容的提问来源于stack exchange，提问作者Matt