單張：如何在自定義控件中設置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方法？

回答

相關問題