LeafletJS：如何删除缩放控件

Posted 2023-02-16

【中文标题】LeafletJS：如何删除缩放控件

【英文标题】：LeafletJS: How to remove the zoom control

【发布时间】：2013-05-08 09:19:30

【问题描述】：

我正在尝试移除 LeafletJS 地图上的缩放控件 (+/-)。

我使用的是MapBox.js version of Leaflet，但大部分操作与Leaflet相同。我这样实现我的地图：

var map = L.mapbox.map('map');

var layer = L.mapbox.tileLayer('MAPBOX-ID', 
    format: 'jpg70',
    minZoom: 13,
    maxZoom: 15,
    reuseTiles: true, 
    unloadInvisibleTiles: true
);
map.addLayer(layer);
map.setView([40.73547,-73.987856]);

documentation 说有一个 zoomControl 选项可以从地图上移除缩放控件，但我没有让它工作。

如何使用此实现删除缩放控件？

谢谢！

【参考方案1】：

这对我有用：

var map = new L.map('map',  zoomControl: false );

用 mapbox 试试：

var map = L.mapbox.map('map',  zoomControl: false );

请参阅 Leaflet 文档中的 map creation 和 zoomControl option。

【讨论】：

var map = L.mapbox.map('map', zoomControl:false );不行，第二个参数需要是指定地图类型的字符串，第三个参数取 zoomControl:false

对于那些只想禁用鼠标滚轮缩放但不禁用使用地图上的 + 和 - 按钮进行缩放的用户，请将 zoomControl 替换为 scrollWheelZoom

【参考方案2】：

如果您想动态打开和关闭缩放，您可以执行以下操作：

map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
$(".leaflet-control-zoom").css("visibility", "hidden");

【讨论】：

想要禁用拖动功能的朋友也可以这样做：map.dragging.disable();

【参考方案3】：

感谢坐标的回答，我能够找出正确的方法。解决办法是：

// Create the map
var map = L.mapbox.map('map', null,  zoomControl:false );

// Create my custom layer
var layer = L.mapbox.tileLayer('MAPBOX-ID', 
    format: 'jpg80',
    minZoom: 13,
    maxZoom:15,
    tileSize: 256,
    reuseTiles: true, 
    unloadInvisibleTiles: true
);


// Add the layer
map.addLayer(layer);

【参考方案4】：

您可以通过这种方式删除控件zoomControl：

map.removeControl(map.zoomControl);

【参考方案5】：

你可以使用

map.zoomControl.remove();

【讨论】：

在我的例子中得到一个 TypeError: map.zoomControl.remove 不是一个函数。我发现的方法是使用这样的removeControl 函数：map.removeControl(map.zoomControl);

我猜，map.zoomControl.remove() 是 1.0.0 版本的新功能，而 map.removeControl() 是低版本的。

【参考方案6】：

map.scrollWheelZoom.disable();

【参考方案7】：

动态删除然后重新添加缩放控件：

var map = L.mapbox.map('map');

if( wantToRemove ) 
    map.removeControl( map.zoomControl ); 
 else 
    map.addControl( map.zoomControl );

【讨论】：

这个答案仍然有效，与其他答案不同