Настроить кнопку увеличения/уменьшения в файле 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/

Ответ 1

Элементы управления масштабированием/выводом обернуты абсолютно позиционированным элементом с помощью left:0 (из-за класса слева.), поэтому float:left не поможет, вы можете выровнять его вправо, переопределив left:0 на 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 для используемой библиотеки вы можете найти здесь

Ответ 2

В настоящее время вы можете использовать:

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