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课程来充分发挥其潜力。你仍然在做课外的工作，连接事件处理程序和实际事件处理等等。尝试这样的事情，这样你就可以将所有逻辑包含在你的自定义控件类中（在代码片段中使用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>

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

1 个答案: