web-dev-qa-db-ja.com

leaflet.jsのズームイン/アウトボタンをカスタマイズする

ズームコントロール（+/-）をカスタマイズしようとしているので、Googleマップのように右側に表示されるはずです（ https://www.google.com/maps/ ）

float:right;を追加しようとしましたが、機能しませんでした。

CSSファイルから：

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  font: bold 18px 'Lucida Console', Monaco, monospace;
  text-indent: 1px;
  }
.leaflet-control-zoom-out {
  font-size: 20px;
  }

.leaflet-touch .leaflet-control-zoom-in {
  font-size: 22px;
  }
.leaflet-touch .leaflet-control-zoom-out {
  font-size: 24px;
  }

http://jsfiddle.net/hsy7v/1/

javascriptcssleaflet
28
user3378649

ズームイン/アウトコントロールは、left:0（.leaflet-leftクラスによる）、したがってfloat:leftは役に立たないので、left:0 by right:0、または.leaflet-leftクラスから.leaflet-right

しかし、より適切な方法は、提供されたAPIを使用することです。

//disable zoomControl when initializing map (which is topleft by default)
var map = L.map("map", {
    zoomControl: false
    //... other options
});

//add zoom control with your options
L.control.zoom({
     position:'topright'
}).addTo(map);

更新済みを参照してください fiddle

使用するライブラリのAPIリファレンスは、こちらにあります here

81
paulitto

現在、次を使用できます。

var map = L.map('map', {
  zoomControl: true
});
map.zoomControl.setPosition('topright');
47
Sebastian Nowak