Draggable Marker

<!--
  示例：可拖动标记
  核心逻辑：Marker 开启 draggable，拖动过程中回读经纬度，松开后弹窗显示落点
  数据：页面内写死的三个城市锚点
  依赖：MapLibre GL JS 4 · jsDelivr CDN · demotiles 样式
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>可拖动标记</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
<style>
  html,body{height:100%;margin:0}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif;color:#16181d}
  .bar{flex:0 0 auto;display:flex;gap:14px;align-items:center;padding:8px 12px;
       background:#f6f7f9;border-bottom:1px solid #e3e6ea;font-size:12px;color:#58606e;flex-wrap:wrap}
  .bar b{color:#16181d;font-weight:600}
  #map{flex:1 1 auto;min-height:0}
</style>
</head>
<body>
<div class="bar">
  <span>落点 <b id="pos">116.390, 39.900</b></span>
  <span>状态 <b id="st">静止</b></span>
  <span>按住标记拖动，松手后弹窗显示坐标</span>
</div>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
<script>
(function () {
  'use strict';

  if (typeof maplibregl === 'undefined') {
    document.body.innerHTML =
      '<div style="padding:24px;color:#b42318">MapLibre 加载失败，请检查能否访问 cdn.jsdelivr.net</div>';
    return;
  }

  var map = new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [116.39, 39.9],
    zoom: 6,
    attributionControl: { compact: true, customAttribution: 'MapLibre demo tiles' }
  });

  map.addControl(new maplibregl.NavigationControl(), 'top-right');

  var posEl = document.getElementById('pos');
  var stEl = document.getElementById('st');

  function fmt(lngLat) {
    return lngLat.lng.toFixed(3) + ', ' + lngLat.lat.toFixed(3);
  }

  var anchor = [116.39, 39.90];

  var marker = new maplibregl.Marker({ draggable: true, color: '#e8590c' })
    .setLngLat(anchor)
    .addTo(map);

  var popup = new maplibregl.Popup({ offset: 26, closeButton: false })
    .setHTML('<b>落点</b><br>' + fmt(marker.getLngLat()));

  marker.setPopup(popup);

  /* drag 阶段每秒回调多次，只更新读数；dragend 再做后续业务 */
  marker.on('dragstart', function () {
    stEl.textContent = '拖动中';
  });

  marker.on('drag', function () {
    posEl.textContent = fmt(marker.getLngLat());
  });

  marker.on('dragend', function () {
    var p = marker.getLngLat();
    stEl.textContent = '静止';
    posEl.textContent = fmt(p);
    popup.setHTML('<b>落点</b><br>' + fmt(p) +
      '<br><span style="color:#888">已偏移 ' +
      Math.round(map.getCenter().distanceTo(p) / 1000) + ' km（相对地图中心）</span>');
  });

  /* 三个候选锚点，点一下就搬过去，方便对照 */
  var spots = [
    { name: '北京', c: [116.39, 39.90] },
    { name: '上海', c: [121.47, 31.23] },
    { name: '成都', c: [104.06, 30.57] }
  ];

  spots.forEach(function (s) {
    new maplibregl.Marker({ color: '#2e86de' })
      .setLngLat(s.c)
      .setPopup(new maplibregl.Popup({ offset: 22 }).setHTML(s.name))
      .addTo(map);
  });

  map.on('error', function (e) {
    if (e.error) console.warn('地图错误：' + e.error.message);
  });
})();
</script>
</body>
</html>