2025Mapbox零基础入门教程（12）地图标记和弹窗

原创于 2025-07-31 11:06:27 发布 · 369 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #arcgis #webgis #GIS #地理信息科学 #mapbox #大学生

地图标记

在Mapbox中添加地图标记（marker）的流程包括使用Mapbox GL库中的marker类创建标记，并通过setLngLat方法设置标记的位置。

Marker默认样式为蓝色，但可通过配置选项进行自定义，如改变颜色、位置、尺寸等。

此外，通过设置draggable属性，可实现标记的拖拽功能，并利用dragend事件获取拖拽后的最新位置。Mapbox的高度封装简化了操作，但了解如何在未封装的情况下实现同样功能对于提升技术能力同样重要。

这里我们还是沿用前面的地图画布：

const map = new mapboxgl.Map({
  container: "map",
  style: {
    version: 8,
    sources: {
      "raster-tiles": {
        type: "raster",
        tiles: [
          "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
        ],
        tileSize: 256,
      },
    },
    glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
    layers: [
      {
        id: "my-tiles",
        type: "raster",
        source: "raster-tiles",
      },
    ],
  },
  // projection: "globe",
  zoom: 14,
  center: [114.406893, 30.464766],
});

添加地图标记

Mapbox中添加覆盖物使用markers类，类似于OpenLayers中的overlay类。

类用于创建地图标记，并通过方法设置位置；添加标记到地图实例中，Mapbox会自动创建DOM元素。

// 添加地图标记
map.on("load", function () {
  const marker = new mapboxgl.Marker();
  marker.setLngLat([114.406893, 30.464766]);
  marker.addTo(map);
});

修改配置

markers类具有丰富的配置选项，包括图标位置、颜色、大小等。这里我们将图标改为绿色：

// 添加地图标记
map.on("load", function () {
  const marker = new mapboxgl.Marker({ anchor: "top-left", color: "green" });
  marker.setLngLat([114.406893, 30.464766]);
  marker.addTo(map);
});

拖拽功能

markers支持拖拽功能，并可通过事件获取最新位置。

在代码后面直接添加draggable，设置为true，即可实现拖动效果：

// 添加地图标记
map.on("load", function () {
  const marker = new mapboxgl.Marker({ anchor: "top-left", color: "green", draggable: true });
  marker.setLngLat([114.406893, 30.464766]);
  marker.addTo(map);
});

地图弹窗

除了marker以外，mapbox中还有一个地图覆盖标记物，叫做pop up。

const popup = new mapboxgl.Popup();
popup
  .setLngLat([114.406893, 30.464766])
  .setHTML("<h1>Hello World</h1>")
  .addTo(map);