给卡帕多奇亚民宿做预订页，我把地图瓦片换成了静态图

接了个小外包：给卡帕多奇亚一家民宿做预订落地页，甲方要求首页放一张能看热气球起飞点的地图，最好还能点。听起来简单，结果第一版上线当晚就被说「打开像PPT翻页，一卡一卡的」。

环境很具体：VPS 在伊斯坦布尔机房，Node 18 + Vite 构建，前端纯静态托管，地图用 Leaflet 1.9.4，瓦片走 OpenStreetMap 公共源。数据量不大，页面就 12 张客房卡片加一个地图容器，但地图初始化时一次拉 20 多块瓦片，加上游客多半在酒店 Wi-Fi 或 4G 漫游下打开，首屏 LCP 直接飙到 6 秒多。

我先做了最土的事：把地图懒加载，只有滚动到视口才初始化。

const mapEl = document.querySelector('#map');
const io = new IntersectionObserver(([entry]) => {
  if (!entry.isIntersecting) return;
  import('./map.js').then(({ initMap }) => initMap(mapEl));
  io.disconnect();
}, { rootMargin: '200px' });
io.observe(mapEl);

但懒加载只解决「不拖首屏」，点开地图照样卡。后来我干脆把默认视图换成一张预先裁好的静态图：用 QGIS 把民宿周边 3 公里导出成 1200px 宽的 WebP，约 90KB，叠一个「查看交互地图」按钮，用户真要点才加载 Leaflet。

<picture>
  <source srcset="/img/cappadocia-static.webp" type="image/webp">
  <img src="/img/cappadocia-static.jpg" width="1200" height="800"
       alt="民宿周边热气球起飞点示意" loading="lazy">
</picture>
<button id="load-map" data-map="/map.html">查看交互地图</button>

为什么这么干：瓦片地图的代价不在代码，在网络往返和第三方源的稳定性。公共 OSM 源在旅游旺季被大量请求时，伊斯坦布尔机房过去也偶发超时，用户看到的就是灰格子。静态图把「看一眼位置」和「我要找路」拆成两条路径，前者几乎零成本，后者才付交互的代价。

失效的地方也清楚：静态图没有缩放，民宿老板后来想标「自家停车场入口」，我只能重导一次图，不能让他自己拖。移动端双指缩放静态图会糊，得加 touch-action: pan-y 限制。还有一次我把 rootMargin 设成 200px，结果页面顶部有 sticky 导航，地图容器判定进入视口时其实还被挡住一半，懒加载触发得太早，等于没省。后来改成监听按钮点击，不再赌滚动行为。

现在这页在 4G 下首屏 2.1 秒左右，地图按钮点开才加载 Leaflet。甲方满意了，我却老想着那个停车场入口——你们给这种小商户做地图时，是坚持交互地图，还是也退到静态图加按钮？