前端地图基本操作控制：平移、缩放、旋转与样式切换

百度地图

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(); // 通知地图重新计算尺寸
});

五、常见问题解答

六、知识点总结