如何在Mapbox GL JS中实现类似Mapbox.js的自定义标记简写方法？

嗨，我来帮你梳理下Mapbox GL JS里实现自定义标记的方法～

首先要明确：Mapbox GL JS和你之前用的Mapbox.js（基于Leaflet）的标记体系不一样，它没有内置完全等同于L.icon的简写方法，但实现自定义图标反而更灵活，而且我们可以自己封装出类似的简洁写法。

最接近你原有写法的原生实现 #

Mapbox GL JS的Marker是基于DOM元素的，你可以直接用图片元素作为标记图标，步骤如下：

1. 先初始化地图（注意坐标顺序是[经度, 纬度]，和Leaflet的[纬度,经度]相反，别踩坑！）：

$(function() {
  const token = '*********';
  mapboxgl.accessToken = token;
  
  // 注意这里是[lon, lat]顺序
  const hotelCoords = [<%= @hotel.lng %>, <%= @hotel.lat %>];
  
  const map = new mapboxgl.Map({
    container: 'map-canvas',
    style: 'mapbox://styles/mapbox/streets-v12', // 对应原来的mapbox.streets
    center: hotelCoords,
    zoom: 14
  });

2. 创建带自定义图标的标记，直接用img元素：

// 方式一：直接创建img元素作为图标
  const markerImg = document.createElement('img');
  markerImg.src = '//chart.googleapis.com/chart?chst=d_map_pin_icon&chld=home|EBCB2D';
  
  const marker = new mapboxgl.Marker({
    element: markerImg,
    anchor: 'bottom' // 让图标底部对准坐标点，和Leaflet的图标锚点效果一致
  })
  .setLngLat(hotelCoords)
  .addTo(map);
});

封装成类似L.icon的简写方法 #

如果你想追求和原来一样的简洁写法，可以自己封装一个小工具函数，复用起来更方便：

// 封装一个类似L.icon的函数
function createCustomIcon(options) {
  const img = document.createElement('img');
  img.src = options.iconUrl;
  
  // 可选：支持设置图标大小
  if (options.iconSize) {
    img.style.width = `${options.iconSize[0]}px`;
    img.style.height = `${options.iconSize[1]}px`;
  }
  
  return img;
}

// 使用的时候就和原来的写法几乎一致了！
const marker = new mapboxgl.Marker({
  element: createCustomIcon({
    iconUrl: '//chart.googleapis.com/chart?chst=d_map_pin_icon&chld=home|EBCB2D',
    iconSize: [32, 32] // 可选，按需设置
  }),
  anchor: 'bottom'
})
.setLngLat(hotelCoords)
.addTo(map);

额外提示 #

• Mapbox GL JS还支持更复杂的自定义标记，比如用div加CSS样式做图标，甚至SVG元素，灵活性比Leaflet的L.icon更高。
• 如果你的图标是固定的，也可以上传到Mapbox的Sprite图库，然后通过样式层来添加标记，性能会更好，但动态生成的图标（比如你用Google Chart生成的）还是用DOM元素的方式更合适。

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