Nút 'Trang chủ' Bản đồ tờ rơi

Có khả năng có một loại nút home trên bản đồ Tờ rơi của tôi, nó sẽ phóng to tương ứng với chế độ xem bản đồ ban đầu của tôi hoặc một vị trí xác định cụ thể không?

leaflet

— hoge6b01
nguồn

Sau đây sẽ thêm một điều khiển thu phóng tùy chỉnh với nút home vào bản đồ Tờ rơi. Biểu tượng nhà là từ phông chữ tuyệt vời , vì vậy hãy chắc chắn bao gồm tham chiếu đó.

Fiddle làm việc ở đây .

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);

— toms
nguồn

TUYỆT VỜI! Nó hoạt động như charme! Cảm ơn rât nhiều!

— hoge6b01

+1 cho ví dụ thú vị minh họa cách mở rộng bản địa của LeafletControl.Zoom

— elrobis 3/03/2015

Tôi đã biến đoạn mã đẹp này thành một plugin Leaflet để làm cho nó dễ sử dụng hơn. Cảm ơn, toms!

— Florian Brucker

@toms Plugin Leaflet tôi xây dựng từ mã của bạn hiện được cấp phép theo CC-BY-SA giống như mã gốc của bạn . Tuy nhiên, CC-BY-SA không thực sự phù hợp với phần mềm , vì vậy tôi muốn thay đổi giấy phép của plugin thành MIT . Vì vậy, tôi sẽ cần sự cho phép của bạn với tư cách là tác giả của mã gốc. Bạn có ổn với điều đó không?

— Florian Brucker

Fiddle

— Tikky

Với Leaflet. EasyButton , mọi thứ vẫn khá sạch sẽ: đặt tên cho biểu tượng và chức năng của bạn (di chuột văn bản nếu bạn muốn):

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);

(sang một bên) và câu trả lời ví dụ phóng to của toms với 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);

— người dùng3276552
nguồn

Nối một nút gọi map.setView

http://leafletjs.com/reference.html#map-setview

map.setView(lat, lng, zoom);

— Morgan Herlocker
nguồn