mapbox 点击图标弹出弹框， 并自定义弹窗样式，具体实现代码

实现 Mapbox 点击图标弹出弹框的方法是通过添加一个 Popup 对象，并在点击事件中打开它。以下是一个基本的示例代码：

// 创建地图对象
mapboxgl.accessToken = 'your-access-token';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [lng, lat], // 地图中心点的经纬度
  zoom: 12 // 地图缩放级别
});

// 创建一个 Popup 对象
var popup = new mapboxgl.Popup({ closeOnClick: false })
  .setLngLat([lng, lat]) // 设置弹窗的位置
  .setHTML('<h3>Popup Title</h3><p>Popup content.</p>'); // 设置弹窗的内容

// 创建一个图标对象
var marker = new mapboxgl.Marker()
  .setLngLat([lng, lat]) // 设置图标的位置
  .addTo(map); // 将图标添加到地图上

// 监听图标的点击事件
marker.getElement().addEventListener('click', function() {
  // 打开弹窗
  popup.addTo(map);
});

上述代码中，我们首先创建了一个地图对象 `map`，然后创建了一个 Popup 对象 `popup`，并设置了其位置和内容。接着，我们创建了一个图标对象 `marker`，并将其添加到地图上。最后，我们监听了图标的点击事件，并在事件处理函数中打开了弹窗。

关于自定义弹窗样式，可以在 `setHTML` 方法中使用任何 HTML 和 CSS 样式来自定义弹窗的内容。例如：

.setHTML('<div style="background-color: #f00; color: #fff; padding: 10px;">Popup content.</div>')

上述代码将弹窗的内容设置为一个红色背景、白色文字、有内边距的 `<div>` 元素。