web-dev-qa-db-ja.com

LeafletJS：ズームコントロールを削除する方法

LeafletJS マップ上のズームコントロール（+/-）を削除しようとしています。

Mapbox.jsバージョンの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オプションがあることを示していますが、私はそれを機能させることができませんでした。

この実装でズームコントロールを削除するにはどうすればよいですか？

ありがとう！

javascriptmapleafletmapbox
47
Brett DeWoody

これは私の仕事です。

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

試しましたか？

var map = L.mapbox.map('map', { zoomControl:false });
84
coordinate

ズームを動的にオンまたはオフにしたい場合は、次のようなことができます。

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

Coordinateの回答のおかげで、正しい方法を見つけることができました。解決策は次のとおりです。

// 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);
16
Brett DeWoody

この方法でコントロールzoomControlを削除できます：

map.removeControl(map.zoomControl);
10
leobelizquierdo

あなただけを使用することができます

map.zoomControl.remove();

7
yemaw
map.scrollWheelZoom.disable();
3
Anik

ズームコントロールを動的に削除してから追加し直すには：

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

if( wantToRemove ) {
    map.removeControl( map.zoomControl ); 
} else {
    map.addControl( map.zoomControl );
}
2
CDM