如何调整Mapbox标记点，使其端点对齐地图中心？

Mapbox默认会将标记的几何中心作为锚点，与设置的经纬度（即地图中心）对齐，不会默认使用标记的端点位置。要实现端点对齐，有两种常用方法：

方法一：使用预设锚点属性 #

Mapbox Marker提供了预设的anchor参数，可直接指定标记的锚点位置，对应不同的端点场景：

• 如果端点是标记底部中心，设置anchor: 'bottom'
• 端点是底部左侧，设置anchor: 'bottom-left'
• 端点是底部右侧，设置anchor: 'bottom-right'
• 其他预设值还包括'top'、'left'、'right'、'center'等

示例代码：

// 创建标记时指定锚点
const marker = new mapboxgl.Marker({
  anchor: 'bottom' // 替换为匹配你标记端点的锚点值
})
  .setLngLat(map.getCenter()) // 绑定到地图中心
  .addTo(map);

方法二：自定义像素偏移 #

如果标记的端点位置无法通过预设锚点匹配，可以用offset属性设置精确的像素偏移。Mapbox的偏移坐标系为：x轴向右为正，y轴向下为正，你需要根据标记中心到端点的像素差来设置。

比如标记中心到端点的偏移是向下30px、向左10px，就设置offset: [-10, 30]：

const marker = new mapboxgl.Marker({
  offset: [-10, 30] // 根据实际偏移量调整
})
  .setLngLat(map.getCenter())
  .addTo(map);

提示：可以通过图片编辑工具测量标记中心到端点的像素距离，来确定准确的偏移值。

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