在Mapbox中，標記是一個非常重要的功能，它能夠幫助你在地圖上標註特定位置。無論是用來標示地標、景點、餐廳或其他地理位置，標記都是地圖應用中最常見的元素之一。

添加標記

要在 Mapbox 地圖上添加標記，可以使用 mapboxgl.Marker()。這是最簡單的標記添加方式

var marker = new mapboxgl.Marker()
    .setLngLat([121.5645, 25.0330])
    .addTo(map);

可調整參數

1.draggable

使你的marker可以被拖動

var marker = new mapboxgl.Marker({
    draggable: true
})
    .setLngLat([121.5645, 25.0330])
    .addTo(map);

2.anchor

控制標記應該與給定的經緯度對齊的部分。預設值是 center。

var marker = new mapboxgl.Marker({ anchor: 'bottom' })
    .setLngLat([121.5645, 25.0330])
    .addTo(map);

3.className

設定要添加到標記元素的 CSS class 名稱。

var marker = new mapboxgl.Marker({ className: 'my-custom-marker' })
    .setLngLat([121.5645, 25.0330])
    .addTo(map);

4.clickTolerance

設定允許在標記上點擊時的鼠標容差，以像素為單位。預設值是 0

var marker = new mapboxgl.Marker({ clickTolerance: 10 })
    .setLngLat([121.5645, 25.0330])
    .addTo(map);

5.color

標記的顏色。預設是淡藍色 (#3FB1CE)。

var marker = new mapboxgl.Marker({ color: '#FF0000' })
    .setLngLat([121.5645, 25.0330])
    .addTo(map);

6.element

DOM 元素用作標記，默認是一個淚滴狀的 SVG 標記。

var el = document.createElement('div');
el.className = 'custom-marker';
el.style.backgroundImage = 'url(path_to_your_image.png)';
el.style.width = '30px';
el.style.height = '30px';

var marker = new mapboxgl.Marker({ element: el })
    .setLngLat([121.5645, 25.0330])
    .addTo(map);

7.offset

用於相對於元素中心應用的像素偏移量。

var marker = new mapboxgl.Marker({ offset: [0, -20] })
    .setLngLat([121.5645, 25.0330])
    .addTo(map);

8.pitchAlignment

設置標記相對於地圖平面的對齊方式。選項包括 'map' 和 'viewport'，預設為 auto。

var marker = new mapboxgl.Marker({ pitchAlignment: 'map' })
    .setLngLat([121.5645, 25.0330])
    .addTo(map);

9.rotation

標記的旋轉角度，以度數為單位，預設為 0。

var marker = new mapboxgl.Marker({ rotation: 45 })
    .setLngLat([121.5645, 25.0330])
    .addTo(map);

10.rotationAlignment

控制標記的旋轉對齊方式。選項包括 'map' 和 'viewport'，預設為 auto。

var marker = new mapboxgl.Marker({ rotationAlignment: 'viewport' })
    .setLngLat([121.5645, 25.0330])
    .addTo(map);

11.scale

用於設置標記大小的比例。預設比例為 1

var marker = new mapboxgl.Marker({ scale: 2 })
    .setLngLat([121.5645, 25.0330])
    .addTo(map);