Листовка: Как установить метод 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, который не существует: (? LatLng, варианты)

PANTO

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

Также вы не используете класс L.Control - это полный потенциал. Вы все еще делаете хрюканье работы вне класса, прикрепление обработчика событий и фактического обработки событий и т. Д. Попробуйте что-то подобное, чтобы сохранить свою логику в своем пользовательском классе управления (используя листок в фрагменте, но работает с 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 в пользовательском элементе управления?

ответ

Смежные вопросы