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

当您使用Leaflet的panTo方法单击缩略图图像时，我试图平移和缩放到我的地图的一部分。由于某种原因，它无法正常工作。有人可以帮助排除故障吗？这里是我的代码，并现场演示：单张：如何在自定义控件中设置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; 
} 
}

来源

2016-02-27 redshift

事件目标是不是你希望它是什么，它的img的引用不包装div元素。您可以通过将e.target记录到您的控制台并检查它的内容来获得。如果你使用e.target.parentElement，你没事。接下来的错误是，你要添加一个缩放参数到panTo功能不存在：（？经纬度，期权）

哑剧

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>

来源

2016-02-27 18:07:09 iH8

再次化险为夷！谢谢@ iH8！ – redshift

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

回答

相关问题