(九)Mapbox GL JS 中 Marker 图层的使用详解

什么是 Marker？

在 Mapbox GL JS 中，Marker（标记） 是一个可视化元素，用于在地图上标记特定的地理位置。它可以是一个默认的图标、自定义的图像，或者任何 HTML 元素。Marker 不仅能显示位置，还能通过点击、拖动等交互方式增强用户体验。

---

Marker 的基本使用

要使用 Marker，首先需要创建一个 Mapbox GL JS 地图实例，然后通过 mapboxgl.Marker 类创建并添加 Marker。

示例代码

// 创建地图实例
const map = new mapboxgl.Map({container: 'map', // HTML 容器 IDstyle: 'mapbox://styles/mapbox/streets-v11', // 地图样式center: [120.5, 40], // 初始中心点 [经度, 纬度]zoom: 9 // 初始缩放级别
});// 定义一些示例标记点位置
const markers = [{ lngLat: [116.397428, 39.90923], title: '天安门' },{ lngLat: [116.402544, 39.914714], title: '故宫博物院' },{ lngLat: [116.390419, 39.899787], title: '西单商业区' }
]// 添加标记markers.forEach((marker: any) => {// 默认的标记new mapboxgl.Marker().setLngLat(marker.lngLat).addTo(map as mapboxgl.Map)}

在这个例子中，我们创建了一个默认的 Marker（蓝色图标），并将其放置在经纬度 [-74.5, 40] 的位置。

---

自定义 Marker

Marker 支持多种自定义方式，包括自定义图标、添加弹出窗口（Popup）、设置偏移量等。

1. 使用自定义图标

你可以将 Marker 替换为自定义图像。

示例代码

const marker = new mapboxgl.Marker({element: document.createElement('img'), // 创建 img 元素anchor: 'bottom' // 设置锚点为底部
})
.setLngLat([-74.5, 40])
.addTo(map);marker.getElement().src = 'path/to/your/image.png'; // 设置图像路径

这里，我们用一个 img 元素替代默认图标，并指定图像路径，anchor: 'bottom' 确保图像底部对齐到指定位置。

2. 添加弹出窗口（Popup）

Popup 可以在点击 Marker 时显示额外信息。

示例代码

const popup = new mapboxgl.Popup({ offset: 25 }) // 创建 Popup，设置偏移量.setText('Hello, World!'); // 设置显示文本const marker = new mapboxgl.Marker().setLngLat([-74.5, 40]).setPopup(popup) // 绑定 Popup.addTo(map);

点击 Marker 时，会弹出一个显示 “Hello, World!” 的窗口，offset: 25 确保 Popup 与 Marker 有适当距离。

3. 设置偏移量

偏移量可以调整 Marker 的显示位置。

示例代码

const marker = new mapboxgl.Marker({offset: [0, -20] // 向上偏移 20 像素
})
.setLngLat([-74.5, 40])
.addTo(map);

这里，Marker 向上移动了 20 像素，便于更精确地对齐。

---

Marker 的交互

Marker 支持用户交互，如点击和拖动。

1. 点击事件

可以通过监听点击事件添加交互逻辑。

示例代码

const marker = new mapboxgl.Marker().setLngLat([-74.5, 40]).addTo(map);marker.getElement().addEventListener('click', () => {alert('Marker clicked!');
});

点击 Marker 时，会弹出一个提示框。

2. 拖动 Marker

Marker 可以设置为可拖动，用户拖动后可获取其新位置。

示例代码

const marker = new mapboxgl.Marker({draggable: true // 启用拖动
})
.setLngLat([-74.5, 40])
.addTo(map);marker.on('dragend', () => {const lngLat = marker.getLngLat(); // 获取拖动后的经纬度console.log(`Marker dragged to: ${lngLat.lng}, ${lngLat.lat}`);
});

拖动结束后，控制台会输出 Marker 的新经纬度。

---

使用场景

Marker 在多种实际场景中非常实用，例如：

1. 位置标记
   用于标记用户当前位置、商店位置或任何感兴趣的点。

2. 信息展示
   通过 Popup 显示详细信息，如地址、营业时间等。

3. 交互式应用
   允许用户通过拖动 Marker 选择位置，例如设置配送地址或规划路线。

---

注意事项

• 性能：如果地图上有大量 Marker，可能会影响渲染性能。此时，可以考虑使用 GeoJSON 数据和符号层（Symbol Layer）替代。
• 兼容性：Marker 是基于 HTML 的，某些情况下可能与 WebGL 渲染的地图层不完全兼容。
• 样式：自定义 Marker 时，应确保其样式与地图整体风格一致，提升视觉效果。

---

总结

Mapbox GL JS 中的 Marker 是一个强大且灵活的工具，适用于在地图上添加标记并实现交互功能。通过基本使用、自定义（如图标和 Popup）、交互（如点击和拖动），开发者可以轻松构建丰富的地图应用。希望这篇详解能帮助你更好地掌握 Marker 的用法，并在实际项目中灵活运用！