【前端地图】地图基本操作控制——平移、缩放、旋转、手势控制、地图样式切换、全屏模式支持

🎮 第3节 | 地图基本操作控制

🎯 学习目标

老曹说：“地图不能动算什么地图？今天教你让地图飞起来！”

🧠 引言：让用户掌控地图！

地图不只是看的，更是用来“玩”的！优秀的用户体验离不开流畅的操作反馈。本节课带你解锁地图操控的所有姿势，让你的地图像游戏一样丝滑。

老曹吐槽时间：
“有些产品地图做得跟 PPT 似的，点都点不动……用户：你礼貌吗？”

🧭 一、三大基础操作详解

1.1 平移（Pan）📍

平移是最常见的操作，通过改变地图中心点实现视角移动。

✅ 高德地图实现

// 方法一：直接设置中心点
map.setCenter([116.404, 39.915]);

// 方法二：带动画效果平移
map.panTo([116.404, 39.915], 1000); // 1000ms 动画时长

✅ 百度地图实现

// 平移到指定点
map.panTo(new BMap.Point(116.404, 39.915));

// 带偏移量平移
map.panBy(100, 50); // X轴+100px, Y轴+50px

✅ Google Maps 实现

map.panTo({ lat: 39.915, lng: 116.404 });

// 带动画
map.panBy(100, 50);

1.2 缩放（Zoom）🔍

缩放控制地图视野范围，数值越大越精细。

✅ 高德地图

// 设置缩放级别
map.setZoom(15);

// 放大/缩小一级
map.zoomIn(); // 放大
map.zoomOut(); // 缩小

// 动画缩放
map.setZoomAndCenter(15, [116.404, 39.915], true); // 带动画

✅ 百度地图

map.setZoom(15);
map.zoomIn();
map.zoomOut();

// 获取当前缩放级别
console.log(map.getZoom());

✅ Google Maps

map.setZoom(15);
map.setOptions({ zoom: 15 });

// 获取当前缩放级别
console.log(map.getZoom());

1.3 旋转（Rotate）🌀

旋转功能常用于 3D 地图，增强沉浸感。

✅ 高德地图（3D 模式）

// 设置旋转角度（单位：度）
map.setRotation(45);

// 设置俯仰角
map.setPitch(60);

✅ Google Maps（需开启 45° 倾斜视图）

map.setHeading(45); // 方向角
map.setTilt(45); // 俯仰角

🖱️ 二、手势控制与事件监听

2.1 手势开关控制

✅ 示例代码（高德）

// 禁用手势操作
map.setStatus({
dragEnable: false,
zoomEnable: false,
doubleClickZoom: false
});

// 恢复手势操作
map.setStatus({
dragEnable: true,
zoomEnable: true,
doubleClickZoom: true
});

2.2 事件监听机制

✅ 地图移动事件

// 高德地图
map.on('moveend', () => {
console.log('地图移动结束，当前中心点：', map.getCenter());
});

// 百度地图
map.addEventListener('moveend', () => {
console.log('地图移动结束，当前中心点：', map.getCenter());
});

// Google Maps
map.addListener('center_changed', () => {
console.log('地图中心点变化：', map.getCenter().toJSON());
});

✅ 缩放事件

// 高德地图
map.on('zoomend', () => {
console.log('缩放结束，当前级别：', map.getZoom());
});

// 百度地图
map.addEventListener('zoomend', () => {
console.log('缩放结束，当前级别：', map.getZoom());
});

🎨 三、地图样式动态切换

3.1 高德地图样式切换

// 内置样式列表
const styles = [
'normal', // 标准
'dark', // 暗黑
'light', // 淡雅蓝
'whitesmoke', // 远山黛
'fresh', // 马卡龙
'blue_night' // 极夜蓝
];

// 切换样式
map.setMapStyle('amap://styles/dark');

// 自定义样式（需上传 JSON 配置）
map.setMapStyle('amap://styles/YOUR_CUSTOM_STYLE_ID');

3.2 百度地图样式切换

// 使用预设主题
map.setMapType(BMAP_NORMAL_MAP); // 普通地图
map.setMapType(BMAP_SATELLITE_MAP); // 卫星图
map.setMapType(BMAP_HYBRID_MAP); // 混合图（带路网）

3.3 Google Maps 样式切换

// 自定义样式 JSON（示例）
const customStyle = [
{
featureType: 'all',
elementType: 'labels.text.fill',
stylers: [{ color: '#ffffff' }]
}
];

map.setOptions({ styles: customStyle });

🖥️ 四、全屏模式与响应式布局

4.1 全屏模式实现

✅ 原生 JS 实现

function toggleFullscreen() {
const mapContainer = document.getElementById('my-map');
if (!document.fullscreenElement) {
mapContainer.requestFullscreen().then(() => {
map.resize(); // 重置地图尺寸
});
} else {
document.exitFullscreen();
}
}

// 绑定按钮事件
document.getElementById('fullscreen-btn').onclick = toggleFullscreen;

✅ 高德地图内置控件

map.addControl(new AMap.FullScreen());

4.2 响应式布局适配

/* CSS 媒体查询 */
@media (max-width: 768px) {
#my-map {
height: 300px;
}
}

// JS 动态监听窗口大小变化
window.addEventListener('resize', () => {
map.resize(); // 通知地图重新计算尺寸
});

🧪 五、高频面试题 & 答案解析

📊 六、章节知识点总结表格

🧠 七、思维导图回顾

#mermaid-svg-gSy9aZXog6CDfBTc{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-gSy9aZXog6CDfBTc .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-gSy9aZXog6CDfBTc .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-gSy9aZXog6CDfBTc .error-icon{fill:#552222;}#mermaid-svg-gSy9aZXog6CDfBTc .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-gSy9aZXog6CDfBTc .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-gSy9aZXog6CDfBTc .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-gSy9aZXog6CDfBTc .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-gSy9aZXog6CDfBTc .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-gSy9aZXog6CDfBTc .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-gSy9aZXog6CDfBTc .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-gSy9aZXog6CDfBTc .marker{fill:#333333;stroke:#333333;}#mermaid-svg-gSy9aZXog6CDfBTc .marker.cross{stroke:#333333;}#mermaid-svg-gSy9aZXog6CDfBTc svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-gSy9aZXog6CDfBTc p{margin:0;}#mermaid-svg-gSy9aZXog6CDfBTc .edge{stroke-width:3;}#mermaid-svg-gSy9aZXog6CDfBTc .section–1 rect,#mermaid-svg-gSy9aZXog6CDfBTc .section–1 path,#mermaid-svg-gSy9aZXog6CDfBTc .section–1 circle,#mermaid-svg-gSy9aZXog6CDfBTc .section–1 polygon,#mermaid-svg-gSy9aZXog6CDfBTc .section–1 path{fill:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .section–1 text{fill:#ffffff;}#mermaid-svg-gSy9aZXog6CDfBTc .node-icon–1{font-size:40px;color:#ffffff;}#mermaid-svg-gSy9aZXog6CDfBTc .section-edge–1{stroke:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .edge-depth–1{stroke-width:17;}#mermaid-svg-gSy9aZXog6CDfBTc .section–1 line{stroke:hsl(60, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled,#mermaid-svg-gSy9aZXog6CDfBTc .disabled circle,#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:lightgray;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:#efefef;}#mermaid-svg-gSy9aZXog6CDfBTc .section-0 rect,#mermaid-svg-gSy9aZXog6CDfBTc .section-0 path,#mermaid-svg-gSy9aZXog6CDfBTc .section-0 circle,#mermaid-svg-gSy9aZXog6CDfBTc .section-0 polygon,#mermaid-svg-gSy9aZXog6CDfBTc .section-0 path{fill:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-gSy9aZXog6CDfBTc .section-0 text{fill:black;}#mermaid-svg-gSy9aZXog6CDfBTc .node-icon-0{font-size:40px;color:black;}#mermaid-svg-gSy9aZXog6CDfBTc .section-edge-0{stroke:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-gSy9aZXog6CDfBTc .edge-depth-0{stroke-width:14;}#mermaid-svg-gSy9aZXog6CDfBTc .section-0 line{stroke:hsl(240, 100%, 83.5294117647%);stroke-width:3;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled,#mermaid-svg-gSy9aZXog6CDfBTc .disabled circle,#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:lightgray;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:#efefef;}#mermaid-svg-gSy9aZXog6CDfBTc .section-1 rect,#mermaid-svg-gSy9aZXog6CDfBTc .section-1 path,#mermaid-svg-gSy9aZXog6CDfBTc .section-1 circle,#mermaid-svg-gSy9aZXog6CDfBTc .section-1 polygon,#mermaid-svg-gSy9aZXog6CDfBTc .section-1 path{fill:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .section-1 text{fill:black;}#mermaid-svg-gSy9aZXog6CDfBTc .node-icon-1{font-size:40px;color:black;}#mermaid-svg-gSy9aZXog6CDfBTc .section-edge-1{stroke:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .edge-depth-1{stroke-width:11;}#mermaid-svg-gSy9aZXog6CDfBTc .section-1 line{stroke:hsl(260, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled,#mermaid-svg-gSy9aZXog6CDfBTc .disabled circle,#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:lightgray;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:#efefef;}#mermaid-svg-gSy9aZXog6CDfBTc .section-2 rect,#mermaid-svg-gSy9aZXog6CDfBTc .section-2 path,#mermaid-svg-gSy9aZXog6CDfBTc .section-2 circle,#mermaid-svg-gSy9aZXog6CDfBTc .section-2 polygon,#mermaid-svg-gSy9aZXog6CDfBTc .section-2 path{fill:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .section-2 text{fill:#ffffff;}#mermaid-svg-gSy9aZXog6CDfBTc .node-icon-2{font-size:40px;color:#ffffff;}#mermaid-svg-gSy9aZXog6CDfBTc .section-edge-2{stroke:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .edge-depth-2{stroke-width:8;}#mermaid-svg-gSy9aZXog6CDfBTc .section-2 line{stroke:hsl(90, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled,#mermaid-svg-gSy9aZXog6CDfBTc .disabled circle,#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:lightgray;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:#efefef;}#mermaid-svg-gSy9aZXog6CDfBTc .section-3 rect,#mermaid-svg-gSy9aZXog6CDfBTc .section-3 path,#mermaid-svg-gSy9aZXog6CDfBTc .section-3 circle,#mermaid-svg-gSy9aZXog6CDfBTc .section-3 polygon,#mermaid-svg-gSy9aZXog6CDfBTc .section-3 path{fill:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .section-3 text{fill:black;}#mermaid-svg-gSy9aZXog6CDfBTc .node-icon-3{font-size:40px;color:black;}#mermaid-svg-gSy9aZXog6CDfBTc .section-edge-3{stroke:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .edge-depth-3{stroke-width:5;}#mermaid-svg-gSy9aZXog6CDfBTc .section-3 line{stroke:hsl(120, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled,#mermaid-svg-gSy9aZXog6CDfBTc .disabled circle,#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:lightgray;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:#efefef;}#mermaid-svg-gSy9aZXog6CDfBTc .section-4 rect,#mermaid-svg-gSy9aZXog6CDfBTc .section-4 path,#mermaid-svg-gSy9aZXog6CDfBTc .section-4 circle,#mermaid-svg-gSy9aZXog6CDfBTc .section-4 polygon,#mermaid-svg-gSy9aZXog6CDfBTc .section-4 path{fill:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .section-4 text{fill:black;}#mermaid-svg-gSy9aZXog6CDfBTc .node-icon-4{font-size:40px;color:black;}#mermaid-svg-gSy9aZXog6CDfBTc .section-edge-4{stroke:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .edge-depth-4{stroke-width:2;}#mermaid-svg-gSy9aZXog6CDfBTc .section-4 line{stroke:hsl(150, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled,#mermaid-svg-gSy9aZXog6CDfBTc .disabled circle,#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:lightgray;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:#efefef;}#mermaid-svg-gSy9aZXog6CDfBTc .section-5 rect,#mermaid-svg-gSy9aZXog6CDfBTc .section-5 path,#mermaid-svg-gSy9aZXog6CDfBTc .section-5 circle,#mermaid-svg-gSy9aZXog6CDfBTc .section-5 polygon,#mermaid-svg-gSy9aZXog6CDfBTc .section-5 path{fill:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .section-5 text{fill:black;}#mermaid-svg-gSy9aZXog6CDfBTc .node-icon-5{font-size:40px;color:black;}#mermaid-svg-gSy9aZXog6CDfBTc .section-edge-5{stroke:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .edge-depth-5{stroke-width:-1;}#mermaid-svg-gSy9aZXog6CDfBTc .section-5 line{stroke:hsl(180, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled,#mermaid-svg-gSy9aZXog6CDfBTc .disabled circle,#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:lightgray;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:#efefef;}#mermaid-svg-gSy9aZXog6CDfBTc .section-6 rect,#mermaid-svg-gSy9aZXog6CDfBTc .section-6 path,#mermaid-svg-gSy9aZXog6CDfBTc .section-6 circle,#mermaid-svg-gSy9aZXog6CDfBTc .section-6 polygon,#mermaid-svg-gSy9aZXog6CDfBTc .section-6 path{fill:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .section-6 text{fill:black;}#mermaid-svg-gSy9aZXog6CDfBTc .node-icon-6{font-size:40px;color:black;}#mermaid-svg-gSy9aZXog6CDfBTc .section-edge-6{stroke:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .edge-depth-6{stroke-width:-4;}#mermaid-svg-gSy9aZXog6CDfBTc .section-6 line{stroke:hsl(210, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled,#mermaid-svg-gSy9aZXog6CDfBTc .disabled circle,#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:lightgray;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:#efefef;}#mermaid-svg-gSy9aZXog6CDfBTc .section-7 rect,#mermaid-svg-gSy9aZXog6CDfBTc .section-7 path,#mermaid-svg-gSy9aZXog6CDfBTc .section-7 circle,#mermaid-svg-gSy9aZXog6CDfBTc .section-7 polygon,#mermaid-svg-gSy9aZXog6CDfBTc .section-7 path{fill:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .section-7 text{fill:black;}#mermaid-svg-gSy9aZXog6CDfBTc .node-icon-7{font-size:40px;color:black;}#mermaid-svg-gSy9aZXog6CDfBTc .section-edge-7{stroke:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .edge-depth-7{stroke-width:-7;}#mermaid-svg-gSy9aZXog6CDfBTc .section-7 line{stroke:hsl(270, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled,#mermaid-svg-gSy9aZXog6CDfBTc .disabled circle,#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:lightgray;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:#efefef;}#mermaid-svg-gSy9aZXog6CDfBTc .section-8 rect,#mermaid-svg-gSy9aZXog6CDfBTc .section-8 path,#mermaid-svg-gSy9aZXog6CDfBTc .section-8 circle,#mermaid-svg-gSy9aZXog6CDfBTc .section-8 polygon,#mermaid-svg-gSy9aZXog6CDfBTc .section-8 path{fill:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .section-8 text{fill:black;}#mermaid-svg-gSy9aZXog6CDfBTc .node-icon-8{font-size:40px;color:black;}#mermaid-svg-gSy9aZXog6CDfBTc .section-edge-8{stroke:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .edge-depth-8{stroke-width:-10;}#mermaid-svg-gSy9aZXog6CDfBTc .section-8 line{stroke:hsl(330, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled,#mermaid-svg-gSy9aZXog6CDfBTc .disabled circle,#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:lightgray;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:#efefef;}#mermaid-svg-gSy9aZXog6CDfBTc .section-9 rect,#mermaid-svg-gSy9aZXog6CDfBTc .section-9 path,#mermaid-svg-gSy9aZXog6CDfBTc .section-9 circle,#mermaid-svg-gSy9aZXog6CDfBTc .section-9 polygon,#mermaid-svg-gSy9aZXog6CDfBTc .section-9 path{fill:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .section-9 text{fill:black;}#mermaid-svg-gSy9aZXog6CDfBTc .node-icon-9{font-size:40px;color:black;}#mermaid-svg-gSy9aZXog6CDfBTc .section-edge-9{stroke:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .edge-depth-9{stroke-width:-13;}#mermaid-svg-gSy9aZXog6CDfBTc .section-9 line{stroke:hsl(0, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled,#mermaid-svg-gSy9aZXog6CDfBTc .disabled circle,#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:lightgray;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:#efefef;}#mermaid-svg-gSy9aZXog6CDfBTc .section-10 rect,#mermaid-svg-gSy9aZXog6CDfBTc .section-10 path,#mermaid-svg-gSy9aZXog6CDfBTc .section-10 circle,#mermaid-svg-gSy9aZXog6CDfBTc .section-10 polygon,#mermaid-svg-gSy9aZXog6CDfBTc .section-10 path{fill:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .section-10 text{fill:black;}#mermaid-svg-gSy9aZXog6CDfBTc .node-icon-10{font-size:40px;color:black;}#mermaid-svg-gSy9aZXog6CDfBTc .section-edge-10{stroke:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .edge-depth-10{stroke-width:-16;}#mermaid-svg-gSy9aZXog6CDfBTc .section-10 line{stroke:hsl(30, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled,#mermaid-svg-gSy9aZXog6CDfBTc .disabled circle,#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:lightgray;}#mermaid-svg-gSy9aZXog6CDfBTc .disabled text{fill:#efefef;}#mermaid-svg-gSy9aZXog6CDfBTc .section-root rect,#mermaid-svg-gSy9aZXog6CDfBTc .section-root path,#mermaid-svg-gSy9aZXog6CDfBTc .section-root circle,#mermaid-svg-gSy9aZXog6CDfBTc .section-root polygon{fill:hsl(240, 100%, 46.2745098039%);}#mermaid-svg-gSy9aZXog6CDfBTc .section-root text{fill:#ffffff;}#mermaid-svg-gSy9aZXog6CDfBTc .section-root span{color:#ffffff;}#mermaid-svg-gSy9aZXog6CDfBTc .section-2 span{color:#ffffff;}#mermaid-svg-gSy9aZXog6CDfBTc .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#mermaid-svg-gSy9aZXog6CDfBTc .edge{fill:none;}#mermaid-svg-gSy9aZXog6CDfBTc .mindmap-node-label{dy:1em;alignment-baseline:middle;text-anchor:middle;dominant-baseline:middle;text-align:center;}#mermaid-svg-gSy9aZXog6CDfBTc :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

地图操作控制

基础操作

Pan

Zoom

Rotate

手势控制

拖拽开关

滚轮缩放

事件监听

样式切换

内置主题

自定义样式

响应式布局

全屏模式

resize 适配

🎉 结语：地图终于活起来了！

老曹寄语：“恭喜你掌握了地图的灵魂——交互！现在你的地图不仅能看，还能玩！”
下一节课我们将学习地图覆盖物（标记点、折线、多边形），让你的地图内容更加丰富多彩！

📌 作业布置：
实现一个带按钮的地图控制器，支持平移、缩放、旋转、样式切换功能。
👉 提交方式：评论区打卡 or 私聊老曹领取反馈哦～