mapbox-gl 添加标记

在 Mapbox GL JS 中添加标记需要使用 `mapboxgl.Marker` 类。以下是一个简单的示例代码：

<div id="map"></div>
 
<script>
  mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
 
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-96, 37.8],
    zoom: 3
  });
 
  var marker = new mapboxgl.Marker()
    .setLngLat([-96, 37.8])
    .addTo(map);
</script>

这段代码会在页面中创建一个地图，并在地图上添加一个标记。你可以通过 `setLngLat` 方法设置标记的经纬度坐标，然后通过 `addTo` 方法将标记添加到地图上。

如果你想要自定义标记的样式，可以在创建标记对象时通过参数传入一个 HTML 元素，然后在元素中设置自定义样式。例如：

<div id="map"></div>
 
<script>
  mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
 
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-96, 37.8],
    zoom: 3
  });
 
  var el = document.createElement('div');
  el.className = 'marker';
 
  var marker = new mapboxgl.Marker({
    element: el
  })
    .setLngLat([-96, 37.8])
    .addTo(map);
</script>

在这个示例中，我们创建了一个带有 `marker` 类的 HTML 元素，并将其作为参数传入标记对象中。然后，你可以在 CSS 中设置 `marker` 类的样式来自定义标记的外观。