当前位置：首页 > news >正文

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

news 来源：原创 2025/5/18 8:59:06

什么是 Marker？

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

Marker 的基本使用

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

示例代码

// 创建地图实例
const map = new mapboxgl.Map({
  container: 'map', // HTML 容器 ID
  style: '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}`);
});