Next.js中React-Leaflet结合Leaflet.SmoothMarkerBouncing实现弹跳标记求助

1. 安装依赖 #

执行以下命令安装所需包：

npm install leaflet react-leaflet leaflet.smooth_marker_bouncing

2. 基础实现代码 #

在Next.js中，由于Leaflet依赖浏览器环境，需通过动态导入组件禁用SSR。创建BouncingMarkerMap.js组件：

'use client';
import { useEffect, useRef } from 'react';
import { MapContainer, Marker, TileLayer } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet.smooth_marker_bouncing';

// 修复Leaflet默认图标路径问题
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon-2x.png',
  iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png',
});

export default function BouncingMarkerMap() {
  const markerRef = useRef(null);

  // 初始化弹跳配置并启动弹跳
  useEffect(() => {
    // 设置全局弹跳选项（可选）
    L.Marker.setBouncingOptions({
      bounceHeight: 30,
      bounceSpeed: 50,
      shadowAngle: 0.2,
    });

    // 获取原生Leaflet Marker实例并启动弹跳
    if (markerRef.current) {
      const markerInstance = markerRef.current.leafletElement;
      markerInstance.bounce();
      // 若要停止弹跳可调用 markerInstance.stopBouncing()
    }
  }, []);

  return (
    <MapContainer
      center={[51.505, -0.09]}
      zoom={13}
      style={{ height: '600px', width: '100%' }}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {/* 绑定ref获取Marker实例 */}
      <Marker position={[51.505, -0.09]} ref={markerRef} />
    </MapContainer>
  );
}

3. 在页面中使用组件 #

在Next.js页面（如app/page.js）中引入该组件：

import dynamic from 'next/dynamic';

// 动态导入并禁用SSR
const BouncingMarkerMap = dynamic(() => import('../components/BouncingMarkerMap'), {
  ssr: false,
  loading: () => <div>加载地图中...</div>,
});

export default function Home() {
  return (
    <div className="container mx-auto p-4">
      <h1>弹跳标记演示</h1>
      <BouncingMarkerMap />
    </div>
  );
}

关键说明 #

• 'use client' 指令：确保组件在客户端渲染，避免SSR环境下的window对象缺失问题。
• 图标路径修复：Leaflet默认图标路径在Next.js中可能失效，需手动指定CDN地址。
• 插件初始化：通过import 'leaflet.smooth_marker_bouncing'加载插件，扩展Leaflet Marker的方法。
• 触发弹跳：通过ref获取原生Marker实例，调用bounce()方法启动弹跳，stopBouncing()停止弹跳。

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