답변:
다음은 홈 버튼이있는 커스텀 줌 컨트롤을 Leaflet 맵에 추가합니다. 홈 아이콘은 font-awesome 이므로 참조를 포함해야합니다.
여기에서 일하는 바이올린 .
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; }자바 스크립트 :
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을 사용하면 아이콘과 함수의 이름을 지정합니다 (원하는 경우 텍스트를 가리킴 ).
var home = {
lat: 70.3,
lng: 50.5,
zoom: 8
};
L.easyButton('fa-home',function(btn,map){
map.setView([home.lat, home.lng], home.zoom);
},'Zoom To Home').addTo(map);(옆)과 줌 예제는 easyButton으로 톰으로 대답합니다.
// make a bar with the buttons var zoomBar = L.easyBar([ L.easyButton( '<big>+</big>', function(control, map){map.setZoom(map.getZoom()+1);}), L.easyButton( 'fa-home fa-lg', function(control, map){map.setView([home.lat, home.lng], home.zoom);}) L.easyButton( '<big>-</big>', function(control, map){map.setZoom(map.getZoom()-1);}), ]); // add it to the map zoomBar.addTo(map);
map.setView를 호출하는 버튼을 연결하십시오
http://leafletjs.com/reference.html#map-setview
map.setView(lat, lng, zoom);