Map 地图样式（11）

每个地图示例均提供独立的「查看代码（CSS + HTML + JS）」：复制后可在业务页面直接落地。

11-1 基础地图

查看代码（基础地图 | CSS + HTML + JS）

<!-- HTML -->
<div class="hn-map-demo hn-map-base">
  <img class="hn-map-img" src="/map_base.png" alt="基础地图" />
</div>

/* CSS */
.hn-map-demo{
  width: 555px;
  height: 555px;
  position: relative;
  border-radius: 8px;
}
.hn-map-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(66,224,255,.35));
}

// JS
// 基础地图：仅展示，无交互。

11-2 地图选中

示例包含：选中区域高亮、定位点（菱形）与呼吸光晕。点击地图任意位置可移动定位点。

查看代码（地图选中 | CSS + HTML + JS）

<!-- HTML -->
<div class="hn-map-demo hn-map-selected" id="hnMapSelectedDemo">
  <img class="hn-map-img" src="/map_selected.png" alt="地图选中" />

  <div class="hn-pin" id="hnPin">
    <div class="hn-pin__diamond"></div>
    <div class="hn-pin__dot"></div>
  </div>
</div>

/* CSS */
.hn-map-demo{
  width: 555px;
  height: 555px;
  position: relative;
  border-radius: 8px;
}
.hn-map-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(66,224,255,.35));
}

/* 选中态轻微网格/光晕（贴近 UI 右侧示例的“选中背景”） */
.hn-map-selected::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 55% 40%, rgba(66,224,255,.10) 0%, rgba(66,224,255,0) 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 18px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 18px);
  mix-blend-mode: screen;
  opacity: .35;
}

/* 定位点（菱形 + 中心点 + 外圈） */
.hn-pin{
  position: absolute;
  left: 79%;
  top: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
}
.hn-pin__diamond{
  position: absolute;
  inset: 0;
  transform: rotate(45deg);
  border: 2px solid rgba(66,224,255,.27);
  box-sizing: border-box;
}
.hn-pin__dot{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #73CEFF;
  box-shadow: 0 0 4px #42E0FF;
}

/* 呼吸光晕 */
.hn-pin::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(66,224,255,.25) 0%, rgba(66,224,255,0) 70%);
  animation: hnPulse 1.6s ease-in-out infinite;
}
@keyframes hnPulse{
  0%{ transform: translate(-50%, -50%) scale(.9); opacity: .55; }
  50%{ transform: translate(-50%, -50%) scale(1.2); opacity: .85; }
  100%{ transform: translate(-50%, -50%) scale(.9); opacity: .55; }
}

// JS：点击移动定位点
const wrap = document.getElementById('hnMapSelectedDemo');
const pin = document.getElementById('hnPin');

wrap.addEventListener('click', (e) => {
  const rect = wrap.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  pin.style.left = x + 'px';
  pin.style.top = y + 'px';
});