传单:如何在自定义控件中设置 panTo 方法

Leaflet: How to set the panTo method in a custom control?

本文关键字：设置 panTo 方法 自定义控件 传单      更新时间：2023-09-26

当您使用 Leaflet 的panTo方法单击缩略图图像时，我正在尝试平移和缩放到地图的一部分。由于某种原因，它不起作用。有人可以帮助排除故障吗？这是我的代码和现场演示：

现场演示：JSFIDDLE

相关代码：

var jumpKabul = L.Control.extend({
            options: { position: 'bottomleft' },
            onAdd: function(map){
                var container = L.DomUtil.create('div', 'test');
                container.innerHTML = '<div id="map-navigation" class="map-navigation"><a href="#" data-zoom="12" data-position="34.51702396789498,69.11893844604492"><img src="https://placehold.it/150x150"></a></div>';
                return container;
            }
        });
map.addControl(new jumpKabul());
document.getElementById('map-navigation').onclick = function(e) {
var pos = e.target.getAttribute('data-position');
var zoom = e.target.getAttribute('data-zoom');
if (pos && zoom) {
    var loc = pos.split(',');
    var z = parseInt(zoom);
    map.panTo(loc, z, {animation: true});
    return false;
 }
}

事件目标不是你期望的，它是对img的引用，而不是包装div元素。您可以通过e.target登录到控制台并检查其内容来捕获它。如果你会使用e.target.parentElement，你没关系。下一个错误是你向不存在的panTo函数添加一个缩放参数：

panTo（ latlng， options？

）

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

此外，您没有充分利用L.Control类的全部潜力。你仍然在类外做繁重的工作，事件处理程序的附加和实际的事件处理等。尝试这样的事情，以便将所有逻辑保留在自定义控件类中（在代码段中使用 Leaflet，但也使用 Mapbox.js）：

var map = new L.Map('leaflet', {
    'center': [0, 0],
    'zoom': 0,
    'layers': [
        new L.TileLayer('//{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
            'attribution': '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
        })
    ]
});
L.Control.Navigation = L.Control.extend({
    options: {
        position: 'bottomleft'
    },
    onAdd: function (map) {
        var container = L.DomUtil.create('div', 'map-navigation'),
            link = L.DomUtil.create('a', 'map-navigation-link', container),
            img = L.DomUtil.create('img', 'map-navigation-image', link);
            
        link.href = '#';
        // Unsure as why one would need the data attribs
        // Since we could directly use the handler below
        link.dataset.lat = 34.51702396789498;
        link.dataset.lng = 69.11893844604492;
        link.dataset.zoom = 12;
    
        img.src = '//placehold.it/150x150';
        
        L.DomEvent.addListener(link, 'click', function (e) {
            // Using setView because it has zoom
            map.setView([
                link.dataset.lat,
                link.dataset.lng
            ], link.dataset.zoom);
        });
        return container;
    }
});
map.addControl(new L.Control.Navigation());
body {
    margin: 0;
}
html, body, #leaflet {
    height: 100%;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet 0.7.7</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link type="text/css" rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
  </head>
  <body>
    <div id="leaflet"></div>
    <script type="application/javascript" src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
  </body>
</html>

相关文章：