mapbox-gl 添加背景色为黄色的标记

要在 Mapbox GL 中添加背景色为黄色的标记，你需要使用 `Marker` 对象并设置自定义的图标。首先，你需要在你的 HTML 文件中添加一个具有唯一 ID 的元素，该元素将用作 Mapbox GL 容器。例如：

<div id="map"></div>

然后，你需要在你的 JavaScript 文件中创建一个 Mapbox GL 地图，并将其添加到容器中：

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [longitude, latitude],
  zoom: 10
});

接下来，你需要创建一个自定义图标，该图标包含一个带有黄色背景颜色的标记。你可以使用 SVG 图标来创建自定义图标。例如，以下代码将创建一个黄色背景的圆形标记：

var yellowCircle = document.createElement('div');
yellowCircle.className = 'marker';
yellowCircle.style.background = 'yellow';
yellowCircle.style.width = '20px';
yellowCircle.style.height = '20px';
yellowCircle.style.borderRadius = '50%';

现在，你可以使用 `Marker` 对象并将自定义图标添加到地图中。例如，以下代码将创建一个带有黄色背景的标记并将其添加到地图中心：

var marker = new mapboxgl.Marker(yellowCircle)
  .setLngLat([longitude, latitude])
  .addTo(map);

记得在 CSS 文件中添加以下样式，以确保自定义图标正确显示：

.marker {
  display: block;
  border: none;
  padding: 0;
}

这样，你就可以在 Mapbox GL 中添加一个背景为黄色的标记了！