代码之家 › 专栏 › 技术社区 › Neelotpal

如何检测传单地图是否放大或缩小?

leaflet javascript

Neelotpal · 技术社区 · 7 年前

传单上有“zoomstart”和“ZoomMend”两个事件,但我想知道缩放事件后地图是放大还是缩小。

编辑1:

我添加了一把小提琴,但它不能正常工作: 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;
});

1 回复 | 直到 7 年前

richardev Valter Lobo 7 年前

只需更改 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>