Marker

<!--
  示例：Leaflet 标记与弹出窗口
  要点：L.marker 三种图标写法、bindPopup 的 HTML 内容、click 事件、图层组批量增删
  依赖：Leaflet 1.9.4 · jsDelivr CDN
-->
<!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/leaflet@1.9.4/dist/leaflet.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}
  .bar{flex:0 0 auto;padding:8px 12px;background:#f6f7f9;border-bottom:1px solid #e3e6ea;
       display:flex;gap:8px;align-items:center;font-size:12px;color:#58606e}
  .bar button{font:inherit;font-size:12px;padding:4px 10px;border-radius:4px;cursor:pointer;
       border:1px solid #ccd1d9;background:#fff;color:#16181d}
  .bar button:hover{background:#eef0f3}
  #map{flex:1 1 auto;min-height:0}
  .pin{width:14px;height:14px;border-radius:50%;border:2px solid #fff;
       box-shadow:0 0 0 1px rgba(0,0,0,.25)}
</style>
</head>
<body>
<div class="bar">
  <button id="add">添加一批标记</button>
  <button id="clear">清空</button>
  <span id="count">0 个标记</span>
</div>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
(function () {
  'use strict';

  var map = L.map('map', { center: [39.907359, 116.391263], zoom: 12 });

  L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
    maxZoom: 19,
    attribution: 'Tiles © Esri'
  }).addTo(map);

  /* 用一个图层组统一管理，方便一次性增删 */
  var group = L.layerGroup().addTo(map);

  var base = [39.907359, 116.391263];

  /* 六个偏移点，模拟周边设施 */
  var places = [
    ['天安门', 39.907359, 116.391263, '#1f5fd0'],
    ['王府井', 39.914700, 116.410600, '#c2410c'],
    ['前门', 39.899400, 116.397500, '#17694a'],
    ['西单', 39.909700, 116.374200, '#7c3aed'],
    ['东单', 39.908800, 116.418300, '#0e7490'],
    ['崇文门', 39.899900, 116.417200, '#a16207']
  ];

  function addMarkers() {
    places.forEach(function (p) {
      /* 用 divIcon 自定义外观，不需要图片资源 */
      var icon = L.divIcon({
        className: '',
        html: '<div class="pin" style="background:' + p[3] + '"></div>',
        iconSize: [14, 14],
        iconAnchor: [7, 7]
      });

      var m = L.marker([p[1], p[2]], { icon: icon })
        .bindPopup(
          '<b>' + p[0] + '</b><br>' +
          p[1].toFixed(6) + ', ' + p[2].toFixed(6)
        )
        .on('click', function () {
          document.getElementById('count').textContent =
            p[0] + ' · ' + p[1].toFixed(6) + ', ' + p[2].toFixed(6);
        });

      group.addLayer(m);
    });
    refresh();
  }

  function refresh() {
    document.getElementById('count').textContent =
      group.getLayers().length + ' 个标记';
  }

  document.getElementById('add').addEventListener('click', function () {
    group.clearLayers();
    addMarkers();
  });

  document.getElementById('clear').addEventListener('click', function () {
    group.clearLayers();
    refresh();
  });

  /* 初始就放好，打开页面即可看到 */
  addMarkers();

  L.circle(base, {
    radius: 900,
    color: '#1f5fd0',
    weight: 1,
    fillColor: '#1f5fd0',
    fillOpacity: 0.06
  }).addTo(map);
})();
</script>
</body>
</html>