网站里做一个点击展开的地图，四行CSS加一个百度地图API调用就能搞定，展开动画、懒加载、移动端适配都有现成方案

地图展开组件的三个核心问题：①展开动画怎么做才丝滑（不用display:none） → max-height + transition；②地图什么时候加载（不让首页变慢） → 点击展开时才new Map()，懒初始化；③手机上看会不会变形 → 宽度100% + touchZoom + CSS媒体查询适配。

<!-- 触发按钮 --><button id="mapToggle" onclick="toggleMap()">查看公司地图位置 ▼</button><!-- 地图容器，初始折叠 --><div id="mapWrapper" class="map-collapsed"><div id="baiduMap" style="width: 100%; height: 400px;"></div></div>

/* ===== 核心四行CSS ===== */.map-collapsed {max-height: 0;              /* 折叠状态高度为0 */overflow: hidden;            /* 隐藏超出部分 */transition: max-height 0.5s ease-in-out;  /* 过渡动画 */}.map-expanded {max-height: 600px;            /* 展开后最大高度，要大于地图实际高度 */}

展开高度怎么设？你的地图如果高400px，就把max-height设成500~600px，留点余量给padding和margin。设太大（比如9999px）会导致动画前段看不到内容、后段突然结束，体验不好。

let mapInstance = null;        // 地图实例，全局存一份let mapLoaded = false;        // 标记地图是否已加载过let isExpanded = false;       // 当前展开状态function toggleMap() {const wrapper = document.getElementById('mapWrapper');const btn = document.getElementById('mapToggle');if (!isExpanded) {// 展开wrapper.classList.remove('map-collapsed');wrapper.classList.add('map-expanded');btn.innerHTML = '收起地图 ▲';// 地图只加载一次if (!mapLoaded) {initBaiduMap();mapLoaded = true;}isExpanded = true;} else {// 收起wrapper.classList.remove('map-expanded');wrapper.classList.add('map-collapsed');btn.innerHTML = '查看公司地图位置 ▼';isExpanded = false;}}

为什么用mapLoaded标记？如果不加这个标记，每次展开都重新new一个地图，第二次展开就会报错——div里已经有一个地图实例了，再往里塞一个会冲突。所以地图初始化只做一次，后面展开收起只是CSS显隐。

function initBaiduMap() {// 动态加载百度地图JSconst script = document.createElement('script');script.src = 'https://api.map.baidu.com/api?v=3.0&ak=你的AK密钥&callback=onBaiduMapLoaded';document.body.appendChild(script);}// SDK加载完成后回调这个函数function onBaiduMapLoaded() {const map = new BMap.Map('baiduMap');// 设定中心点（换成你的地址坐标）const point = new BMap.Point(116.404, 39.915);map.centerAndZoom(point, 15);// 加个标记const marker = new BMap.Marker(point);map.addOverlay(marker);// 启用滚轮缩放map.enableScrollWheelZoom();mapInstance = map;}

AK密钥怎么获取？去百度地图开放平台（lbsyun.baidu.com）注册账号，创建应用选"浏览器端"，就能拿到一个AK。免费额度每天有配额，企业站完全够用。

// 高德地图的初始化函数function initAmapMap() {const script = document.createElement('script');script.src = 'https://webapi.amap.com/maps?v=2.0&key=你的KEY&callback=onAmapLoaded';document.body.appendChild(script);}function onAmapLoaded() {const map = new AMap.Map('baiduMap', {center: [116.404, 39.915],   // 注意：高德是[经度,纬度]zoom: 15,resizeEnable: true       // 容器大小变化时自动适应});const marker = new AMap.Marker({ position: [116.404, 39.915] });map.add(marker);}

/* 1. 移动端地图高度缩小 */@media (max-width: 768px) {#baiduMap {height: 280px !important;}.map-expanded {max-height: 400px;}}/* 2. 按钮全宽，方便手指点击 */#mapToggle {padding: 14px 24px;font-size: 15px;cursor: pointer;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: #fff;border: none;border-radius: 8px;width: 100%;max-width: 400px;display: block;margin: 0 auto;}

移动端最容易踩的坑：地图展开后只显示左上角一小块，其余部分是灰色。这是因为展开动画结束后地图容器尺寸变了，但地图实例没刷新。解决方案：展开动画的transition结束后，调一下地图的checkResize()方法。

// 展开后监听动画结束，手动刷新地图尺寸const wrapper = document.getElementById('mapWrapper');wrapper.addEventListener('transitionend', function() {if (isExpanded && mapInstance) {// 百度地图和高德地图都有 checkResize 方法mapInstance.checkResize();}});

<!-- HTML中存放地址数据 --><div id="baiduMap"data-lng="116.404"data-lat="39.915"data-zoom="15"data-title="XX科技有限公司"style="width: 100%; height: 400px;"></div>// JS中读取data属性const mapDiv = document.getElementById('baiduMap');const lng = parseFloat(mapDiv.dataset.lng);const lat = parseFloat(mapDiv.dataset.lat);const point = new BMap.Point(lng, lat);

// 门店数据配置const stores = [{ name: '北京总部', lng: 116.404, lat: 39.915 },{ name: '上海分公司', lng: 121.473, lat: 31.230 },{ name: 深圳分公司', lng: 114.057, lat: 22.543 }];function switchStore(index) {const store = stores[index];const point = new BMap.Point(store.lng, store.lat);mapInstance.centerAndZoom(point, 15);// 清除旧标记，加新标记...}

多门店的关键点：地图实例只初始化一次，切换门店时只改变centerAndZoom中心点和标记，不重新new地图。这样切换丝滑，也不会有加载延迟。