Question

Leaflet有事件'zoomstart'和'zoomend'，但我想知道在缩放事件之后地图是放大还是缩小。

EDIT1：

我添加了一个小提琴，但这不能正常工作：http://jsfiddle.net/LnzN2/1940/

var prevZoom = map.getZoom();

map.on('zoomstart',function(e){
  debugger;
  var currZoom = map.getZoom();
  var diff = prevZoom - currZoom;
  if(diff > 0){
    alert('zoomed in');
  } else if(diff < 0) {
    alert('zoomed out');
  } else {
    alert('no change');
  }
  prevZoom = currZoom;
});

Answer 1

只需将zoomstart更改为zoomend，因为库会在缩放完成后更新级别。

此外，当值为-1时，它会降低缩放级别，这意味着您已放大，但是反过来也是如此。

改变了这一切，在我看来解决了这个问题。查看下面的代码段。这里是更新的小提琴http://jsfiddle.net/LnzN2/1965/

// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.
// Creating a tile layer usually involves setting the URL template for the tile images
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {
	   maxZoom: 18,
	   attribution: osmAttrib
});

// initialize the map on the "map" div with a given center and zoom
var map = L.map('map').setView([0,0], 2).addLayer(osm);
var prevZoom = map.getZoom();
    
map.on('zoomend',function(e){
	debugger;
	var currZoom = map.getZoom();
    var diff = prevZoom - currZoom;
    if(diff > 0){
  	   alert('zoomed out');
    } else if(diff < 0) {
  	   alert('zoomed in');
    } else {
  	   alert('no change');
    }
    prevZoom = currZoom;
});

#map {
    height: 500px;
    width: 80%;
}

<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="map"></div>

如何检测传单地图是放大还是缩小？

1 个答案: