如何在Vue/Nuxt中为MapBox添加动态标记？标记不显示排查

你代码里经纬度传参顺序（[经度, 纬度]）是正确的，console.log能打出坐标说明循环逻辑执行正常，问题基本出在以下几个高频场景：

• 自定义标记元素无样式
  你创建了class="marker"的div作为标记载体，但未给该类设置任何宽高、背景样式，默认div是0宽高的透明元素，即使渲染到页面也完全不可见。
  快速验证：去掉new mapboxgl.Marker(el)里的el参数，直接调用new mapboxgl.Marker()使用Mapbox默认的蓝色标记，如果默认标记能正常显示，就可以确认是自定义元素的样式问题。
  修复：给marker类添加基础样式即可，示例：

  .marker {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: #f33;
    cursor: pointer;
  }
  

• 未引入Mapbox官方CSS文件
  Mapbox的标记、弹窗、控件样式全部依赖自带的CSS资源，漏引入会导致标记错位、隐藏甚至交互失效。
  修复：在组件脚本或全局样式入口引入CSS：

  import 'mapbox-gl/dist/mapbox-gl.css'
  

• 标记添加时机早于地图加载完成
  你在Map实例初始化后立即添加标记，当地图样式、瓦片资源还未加载完成时，直接操作标记可能出现渲染异常。
  修复：将添加标记的逻辑放到地图load事件回调中执行：

  const map = new mapboxgl.Map({
    container: "map",
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [10.676524188468528, 55.88490923940639],
    zoom: 6.75
  })
  map.on('load', () => {
    // 原循环添加风机标记的逻辑全部移到此处
    for (const turbine of turbines) {
      const el = document.createElement('div');
      el.className = 'marker';
      new mapboxgl.Marker(el)
        .setLngLat([turbine.Longitude, turbine.Latitude])
        .setPopup(
          new mapboxgl.Popup({ offset: 25 })
            .setHTML(`<h3>${turbine.TurbineName}</h3><p>${turbine.InstallationID}</p>`)
        )
        .addTo(map);
    }
  })
  

• Nuxt SSR 渲染异常
  Mapbox 依赖浏览器端window、document对象，如果组件在服务端渲染阶段执行，会出现初始化失败、元素不渲染的问题。
  修复：用Nuxt内置的<ClientOnly>组件包裹地图组件，确保地图逻辑只在浏览器端执行；也可以在mounted钩子里动态引入mapbox-gl，避免服务端打包报错。

快速排查步骤 #

1. 打开浏览器开发者工具，切换到Elements面板，搜索mapboxgl-marker类：如果DOM里存在对应元素但页面看不到，直接排查CSS样式问题；如果DOM里根本没有标记元素，排查JS执行报错、加载时机、SSR问题。
2. 查看Console面板的红色报错，优先处理token无效、资源加载失败、对象undefined类的报错。

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