应通过初始化配置禁用缩放控件:Google Maps 设 zoomControl: false;高德地图设 zoomEnable: false 或 features: [];Leaflet 设 zoomControl: false;禁用 CSS 隐藏因其不可靠且违反条款。
Google Maps API 初始化时禁用缩放控件
默认情况下,google.maps.Map 会显示缩放控件(+/- 按钮),想彻底隐藏它,不能靠 CSS 隐藏或移除 DOM 元素,必须在初始化地图时通过 mapOptions 显式关闭。否则控件可能延迟出现、或在手势缩放后意外恢复。
关键配置项是 zoomControl: false,它必须和 mapTypeControl、streetViewControl 等一样,在构造函数的选项对象中声明:
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: { lat: 39.9042, lng: 116.4074 },
zoomControl: false, // ✅ 必须设为 false
mapTypeControl: false,
streetViewControl: false
});
-
zoomControl默认为true,仅设为false才生效;设成undefined或遗漏该字段,等同于true - 若同时使用
disableDefaultUI: true,它会一并关闭所有默认 UI(含缩放、地图类型、比例尺等),但粒度太粗,不推荐——除非你确实不需要任何默认控件 - 注意:此设置不影响程序调用
map.setZoom()或手势缩放,只是隐藏 UI 元素
高德地图 JS API 中关闭缩放条
高德地图(AMap)的控件管理逻辑不同,缩放控件对应的是 AMap.Scale 和 AMap.Zoom 两个独立类,但默认启用的其实是 AMap.ControlBar(含缩放+地图类型切换)。要隐藏缩放部分,得在 map 构造时传入 zoomEnable: false,并确保没手动 addControl 过 AMap.Zoom 实例。
最稳妥的方式是初始化地图时直接禁用:
立即学习“前端免费学习笔记(深入)”;
const map = new AMap.Map("map", {
zoom: 12,
center: [116.397428, 39.90923],
zoomEnable: false, // ✅ 关键:禁用手势和 UI 缩放
features: [] // 清空默认控件(可选,避免其他干扰)
});
-
zoomEnable: false同时禁用双击/滚轮缩放 + 缩放控件 UI,若只想隐藏 UI 但保留手势缩放,需改用features: ["default"]再单独移除AMap.Zoom - 不要依赖
map.plugin(["AMap.ToolBar"], ...)后再removeControl,因为默认控件在map创建时已加载,时机容易错位 - 高德新版(v2.0+)中,
features数组控制默认控件集,设为空数组[]可彻底清空所有默认 UI,比逐个关更干净
Leaflet 中移除 Zoom Control 的两种方式
Leaflet 的缩放控件叫 L.Control.Zoom,默认自动添加。隐藏它有「初始化禁用」和「创建后移除」两种路径,推荐前者,避免闪动。