Leaflet.js处理移动和缩放事件

Question

我想知道如何使用Leaflet.js，在移动地图周围（拖动）或缩放地图时捕获事件。

我需要在地图上放置一些标记，并在四处移动（或卸载下一个位置未显示的标记）或更改缩放级别时加载更多标记。

你能帮我举一些例子吗？

谢谢！

Answer 1

看看是否有帮助。

 var map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); L.marker([51.5, -0.09]).addTo(map) .bindPopup('A pretty CSS3 popup.<br> Easily customizable.') .openPopup(); L.marker([51, -0.09]).addTo(map) .bindPopup('A pretty CSS3 popup.<br> Easily customizable.') .openPopup(); //just keep adding more L.markers and coordinates and they should populate on the map 

 #map { height: 180px; } 

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> <div id="map"></div> 

Answer 2

这是我找到的解决方案：

// Setting the CartoDB tile (you can use any tile you want)
var tile = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
              bounds: [[-90,-180],[90,180]],
              attribution:'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
              subdomains:'abcd'
});

// Setting the map parameters
var map = L.map('map', {
        maxBounds: [[-90,-180],[90,180]],,
        minZoom: 0,
        maxZoom: 18,
        fullscreenControl: true
    })
    .addLayer(tile)
    .setView([0, 0], 12);

// Here the events for zooming and dragging
map.on('zoomend', function() {
   // stuff here when user zooms the map...
});
map.on('dragend', function() {
   // stuff here when user drags the map...    
});

就这样。 简而言之:)