首页 / MapLibre / API 文档
NavigationControl
先看结论
缩放、指南针与俯仰按钮，地图最基础的交互控件。
new maplibregl.NavigationControl(options) → NavigationControl
构造参数
| 参数 | 默认 | 说明 |
|---|---|---|
showCompass | true | 显示指南针，可点击复位或拖动旋转 |
showZoom | true | 显示加号与减号按钮 |
visualizePitch | false | 指南针随俯仰角变化形态，便于感知 3D 视角 |
添加与移除
var nav = new maplibregl.NavigationControl({
showCompass: true,
showZoom: true,
visualizePitch: true
});
map.addControl(nav, 'top-right'); // 位置参数省略时默认 top-right
/* 需要隐藏按钮时移除控件，而不是用 CSS 去藏 */
map.removeControl(nav);位置取值
| 取值 | 说明 |
|---|---|
top-left | 适合与自定义品牌控件并排 |
top-right | 默认，右侧竖排 |
bottom-left | 与比例尺同侧时注意顺序 |
bottom-right | 版权信息默认在右下，可能重叠 |
同一位置添加多个控件时，按添加顺序堆叠。 版权信息默认占右下角，把导航控件放到那里会挤在一起。
与自定义按钮的分工
控件只做视角操作。需要「复位到初始视角」「定位到当前位置」这类按钮，
用自定义控件实现，类名沿用
maplibregl-ctrl maplibregl-ctrl-group，
外观就能与内置按钮一致。
map.addControl(new maplibregl.NavigationControl(), 'top-right');
map.addControl(new maplibregl.ScaleControl({ unit: 'metric' }), 'bottom-left');不要用 CSS 隐藏控件。隐藏了视觉，按钮仍然占据布局并响应键盘焦点。
不需要的按钮通过构造参数关掉，整个控件不要时用 removeControl。
经纬志（2026）。《NavigationControl》。https://www.jingweizhi.com/maplibre/api/navigation-control.html（访问日期 2026-11-03）。