使用Mapbox GL JS在React/Next应用中标记点无法渲染求助

你的代码存在三个核心问题导致标记点和导航控件无法正常显示：

1. 缺少 Mapbox GL CSS 导入 #

Mapbox 的导航控件（NavigationControl）依赖官方提供的 CSS 样式来渲染，未导入的话控件会存在但不可见。

2. useEffect 无依赖数组导致重复执行 #

未指定依赖数组的 useEffect 会在组件每次重渲染时重复执行，导致地图实例被反复创建和销毁，控件与标记点无法稳定挂载。

3. 标记点元素样式不完整 #

自定义标记点的背景图未设置缩放规则，导致图片无法正确显示在元素内。

修复后的完整代码 #

import { useEffect, useRef } from "react";
import { Container, Box, Button } from '@mui/material';
import { styled } from '@mui/system';
import dynamic from 'next/dynamic';
// 动态导入 Mapbox，避免 SSR 问题
const mapboxgl = dynamic(() => import('mapbox-gl').then(mod => mod.default), { ssr: false });
// 导入 Mapbox 核心样式
import 'mapbox-gl/dist/mapbox-gl.css';
import { useRouter } from 'next/router'

const MapContainer = styled(Box)`
  width: 70%;
  height: 100vh;

  @media (max-width: 600px) {
    height: 50vh;
    width: 100%;
  }
`;

const MainContainer = styled(Container)({
  display: 'flex',
  flexDirection: 'row'
});

export default function Home() {
  const mapContainer = useRef(null);
  const router = useRouter();

  useEffect(() => {
    // 确保容器元素存在再初始化地图
    if (!mapContainer.current) return;

    mapboxgl.accessToken = "你的 Mapbox Access Token";

    const map = new mapboxgl.Map({
      container: mapContainer.current,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-74.0060, 40.7128],
      zoom: 12,
    });

    // 添加导航控件
    map.addControl(new mapboxgl.NavigationControl(), "top-right");

    // 创建并配置标记点元素
    const el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage = 'url(https://placekitten.com/g/500)';
    el.style.width = '100px';
    el.style.height = '100px';
    el.style.backgroundSize = 'cover'; // 确保背景图适配元素大小
    el.style.borderRadius = '50%'; // 可选：将标记点设为圆形
    el.style.cursor = 'pointer';

    // 添加标记点到地图
    new mapboxgl.Marker(el)
      .setLngLat([-74.0060, 40.7128])
      .addTo(map);

    // 组件卸载时清理地图实例
    return () => {
      map.remove();
    };
  }, []); // 空依赖数组确保仅在组件挂载时执行一次

  return (
    <MainContainer disableGutters maxWidth={false}>
      <MapContainer ref={mapContainer} />
    </MainContainer>
  );
}

关键修复说明 #

• CSS 导入：添加 import 'mapbox-gl/dist/mapbox-gl.css' 来加载导航控件的样式。
• useEffect 依赖数组：添加空数组 []，确保地图仅初始化一次。
• 标记点样式优化：增加 backgroundSize: 'cover' 让背景图正确填充元素，可选添加圆角提升视觉效果。
• 动态导入 Mapbox：使用 Next.js 的 dynamic 函数并设置 ssr: false，避免服务端渲染时因访问 window 对象导致的错误。

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