mapbox-gl 给每一个标记点添加不同的弹窗

要给每个标记点添加不同的弹窗，可以使用Mapbox GL的Popup对象。在添加标记点时，可以为每个标记点创建一个Popup对象，并在需要时将其打开。

以下是一个示例，展示如何为每个标记点添加不同的弹窗：

// 创建一个地图
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-74.5, 40],
  zoom: 9
});

// 添加标记点和弹窗
var markers = [
  {
    coordinates: [-74.5, 40], // 标记点的经纬度
    name: 'New York City', // 标记点的名称
    description: 'The largest city in the United States.' // 标记点的描述信息
  },
  {
    coordinates: [-77.0369, 38.9072],
    name: 'Washington D.C.',
    description: 'The capital city of the United States.'
  },
  {
    coordinates: [-118.2437, 34.0522],
    name: 'Los Angeles',
    description: 'The second largest city in the United States.'
  }
];

markers.forEach(function(marker) {
  // 创建标记点
  var el = document.createElement('div');
  el.className = 'marker';

  // 创建Popup对象
  var popup = new mapboxgl.Popup({
    offset: 25
  }).setHTML('<h3>' + marker.name + '</h3><p>' + marker.description + '</p>');

  // 将Popup对象与标记点关联
  new mapboxgl.Marker(el)
    .setLngLat(marker.coordinates)
    .setPopup(popup)
    .addTo(map);
});

在这个示例中，我们首先创建了一个包含每个标记点的数组。然后，我们使用forEach循环遍历每个标记点，并为每个标记点创建一个Popup对象。我们将Popup对象的HTML内容设置为标记点的名称和描述信息。最后，我们将Popup对象与标记点关联，并将标记点添加到地图上。

这个示例只是一个简单的演示，你可以根据自己的需求来更改标记点的样式和Popup对象的内容。