Leaflet：如何在自定义控件中设置panTo方法？

Question

当您使用 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;
 }
}

Answer 1

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

panTo( latlng, options? )

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

此外，您没有充分发挥 L.Control class 的潜力。你仍在做 class 之外的繁重工作，事件处理程序的附加和实际的事件处理等。尝试这样的事情，这样你就可以将所有逻辑包含在你的自定义控件中 class （在片段中使用传单，但也适用于 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>

Leaflet：如何在自定义控件中设置panTo方法？

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

javascript

leaflet