Есть ли возможность иметь своего рода домашнюю кнопку на моей карте Leaflet, которая будет увеличивать мой первоначальный вид карты или определенную определенную позицию соответственно?
11
Следующее добавит пользовательский элемент управления масштабированием с помощью кнопки «Домой» на карту Leaflet. Иконка дома из шрифта-удивительный , поэтому обязательно включите эту ссылку.
Рабочая скрипка здесь .
HTML:
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>
<body>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
CSS:
#map { height: 340px; }
.leaflet-bar a { background-color: #fff; border-bottom: 1px solid #ccc; color: #444; display: block; height: 26px; width: 26px; line-height: 1.45 !important; text-align: center; text-decoration: none; font: bold 18px 'Lucida Console', Monaco, monospace; }
JavaScript:
var lat = 51.505;
var lng = -0.09;
var zoom = 12;
// set up the map and remove the default zoomControl
var map = L.map('map', {
zoomControl: false
});
map.setView([lat, lng], zoom);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
// custom zoom bar control that includes a Zoom Home function
L.Control.zoomHome = L.Control.extend({
options: {
position: 'topright',
zoomInText: '+',
zoomInTitle: 'Zoom in',
zoomOutText: '-',
zoomOutTitle: 'Zoom out',
zoomHomeText: '<i class="fa fa-home" style="line-height:1.65;"></i>',
zoomHomeTitle: 'Zoom home'
},
onAdd: function (map) {
var controlName = 'gin-control-zoom',
container = L.DomUtil.create('div', controlName + ' leaflet-bar'),
options = this.options;
this._zoomInButton = this._createButton(options.zoomInText, options.zoomInTitle,
controlName + '-in', container, this._zoomIn);
this._zoomHomeButton = this._createButton(options.zoomHomeText, options.zoomHomeTitle,
controlName + '-home', container, this._zoomHome);
this._zoomOutButton = this._createButton(options.zoomOutText, options.zoomOutTitle,
controlName + '-out', container, this._zoomOut);
this._updateDisabled();
map.on('zoomend zoomlevelschange', this._updateDisabled, this);
return container;
},
onRemove: function (map) {
map.off('zoomend zoomlevelschange', this._updateDisabled, this);
},
_zoomIn: function (e) {
this._map.zoomIn(e.shiftKey ? 3 : 1);
},
_zoomOut: function (e) {
this._map.zoomOut(e.shiftKey ? 3 : 1);
},
_zoomHome: function (e) {
map.setView([lat, lng], zoom);
},
_createButton: function (html, title, className, container, fn) {
var link = L.DomUtil.create('a', className, container);
link.innerHTML = html;
link.href = '#';
link.title = title;
L.DomEvent.on(link, 'mousedown dblclick', L.DomEvent.stopPropagation)
.on(link, 'click', L.DomEvent.stop)
.on(link, 'click', fn, this)
.on(link, 'click', this._refocusOnMap, this);
return link;
},
_updateDisabled: function () {
var map = this._map,
className = 'leaflet-disabled';
L.DomUtil.removeClass(this._zoomInButton, className);
L.DomUtil.removeClass(this._zoomOutButton, className);
if (map._zoom === map.getMinZoom()) {
L.DomUtil.addClass(this._zoomOutButton, className);
}
if (map._zoom === map.getMaxZoom()) {
L.DomUtil.addClass(this._zoomInButton, className);
}
}
});
// add the new control to the map
var zoomHome = new L.Control.zoomHome();
zoomHome.addTo(map);
Control.Zoom
С Leaflet.EasyButton все остается довольно чисто: назовите свой значок и функцию (наведите курсор на текст, если хотите):
(в сторону) и пример увеличения масштаба изображения с помощью easyButton:
источник
Подключите кнопку, которая вызывает map.setView
http://leafletjs.com/reference.html#map-setview
источник