MapLibre GL JS第62课：创建可拖动标记

原创于 2026-06-22 12:08:02 发布 · 119 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#GIS #MapLibre GL JS #Mapbox #Marker

MapLibre GL JS教程专栏收录该内容

64 篇文章

订阅专栏

📌 学习目标

掌握创建可拖动标记的实现方法
理解相关API的使用
能够独立完成类似功能开发

🎯 核心概念

创建可拖动的标记。

💻 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Create a draggable Marker</title>
    <meta property="og:description" content="将标记拖动到地图上的新位置并在显示中填充其坐标。" />
    <meta property="og:created" content="2006-06-25" />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
<style>
    .coordinates {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        position: absolute;
        bottom: 40px;
        left: 10px;
        padding: 5px 10px;
        margin: 0;
        font-size: 11px;
        line-height: 18px;
        border-radius: 3px;
        display: none;
    }
</style>

<div id="map"></div>
<pre id="coordinates" class="coordinates"></pre>

<script>
    const coordinates = document.getElementById('coordinates');
    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://demotiles.maplibre.org/style.json',
        center: [0, 0],
        zoom: 2
    });

    const marker = new maplibregl.Marker({draggable: true})
        .setLngLat([0, 0])
        .addTo(map);

    function onDragEnd() {
        const lngLat = marker.getLngLat();
        coordinates.style.display = 'block';
        coordinates.innerHTML =
            `Longitude: ${lngLat.lng}<br />Latitude: ${lngLat.lat}`;
    }

    marker.on('dragend', onDragEnd);
</script>
</body>
</html>

🔍 代码解析

1. 初始化地图

使用 new maplibregl.Map() 创建地图实例，配置了以赤道为中心的全球视图。

2. 关键配置项

draggable: true: 启用标记的拖动功能
getLngLat(): 获取标记当前位置坐标
dragend事件: 监听拖动结束事件
实时坐标显示: 在拖动结束后更新坐标显示

⚙️ 参数说明

参数	类型	必填	说明
draggable	boolean	否	是否可拖动，默认false
lngLat	[number, number]	是	初始位置 [经度, 纬度]
marker.getLngLat()	method	-	获取当前坐标
dragend	event	-	拖动结束时触发

🎨 效果说明

在这里插入图片描述

运行代码后，地图显示全球视图，在地图中心（0, 0位置）显示一个可拖动的标记。用户可以：

点击并拖动标记到任意位置
拖动过程中标记跟随鼠标移动
释放鼠标后，底部显示标记当前的经纬度坐标

💡 常见问题

Q1: 标记不能拖动？
A: 检查以下几点：

确认创建Marker时设置了 draggable: true
确认标记已添加到地图（addTo(map)）
检查是否有其他元素阻止了鼠标事件

Q2: 如何获取拖动过程中的实时坐标？
A: 监听drag事件获取实时坐标：

marker.on('drag', () => {
    const lngLat = marker.getLngLat();
    coordinates.innerHTML = `Longitude: ${lngLat.lng.toFixed(4)}<br />Latitude: ${lngLat.lat.toFixed(4)}`;
});

Q3: 如何限制拖动范围？
A: 在dragend事件中检查并纠正位置：

marker.on('dragend', () => {
    const lngLat = marker.getLngLat();
    // 限制在[-180, 180]经度范围
    const clampedLng = Math.max(-180, Math.min(180, lngLat.lng));
    const clampedLat = Math.max(-90, Math.min(90, lngLat.lat));
    marker.setLngLat([clampedLng, clampedLat]);
});