什么是 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 在多种实际场景中非常实用，例如：
-
位置标记
用于标记用户当前位置、商店位置或任何感兴趣的点。 -
信息展示
通过 Popup 显示详细信息，如地址、营业时间等。 -
交互式应用
允许用户通过拖动 Marker 选择位置，例如设置配送地址或规划路线。
注意事项
- 性能：如果地图上有大量 Marker，可能会影响渲染性能。此时，可以考虑使用 GeoJSON 数据和符号层（Symbol Layer）替代。
- 兼容性：Marker 是基于 HTML 的，某些情况下可能与 WebGL 渲染的地图层不完全兼容。
- 样式：自定义 Marker 时，应确保其样式与地图整体风格一致，提升视觉效果。
总结
Mapbox GL JS 中的 Marker 是一个强大且灵活的工具，适用于在地图上添加标记并实现交互功能。通过基本使用、自定义（如图标和 Popup）、交互（如点击和拖动），开发者可以轻松构建丰富的地图应用。希望这篇详解能帮助你更好地掌握 Marker 的用法，并在实际项目中灵活运用！