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

当您使用传单的

panTo

方法单击缩略图时，我正在尝试平移和缩放地图的一部分。由于某种原因，它不起作用。有人能帮忙排除故障吗？以下是我的代码和现场演示：

现场演示：

相关代码：

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;
 }
}

var=L.Control.extend({
选项：{位置：'bottomleft'}，
onAdd：函数（映射）{
var container=L.DomUtil.create（'div'，'test'）；
container.innerHTML=''；
返回容器；
}
});
addControl（new jumpkable（））；
document.getElementById（'map-navigation'）。onclick=function（e）{
var pos=e.target.getAttribute（'data-position'）；
var zoom=e.target.getAttribute（'data-zoom'）；
如果（位置和缩放）{
var loc=位置拆分（'，'）；
var z=parseInt（缩放）；
panTo（loc，z，{animation:true}）；
返回false；
}
}

事件目标不是您期望的，它是对

img

的引用，而不是包装

div

元素。您可以通过将

e.target

记录到您的控制台并检查其内容来捕获它。如果您使用

e.target.parentElement

，您就可以了。下一个错误是将缩放参数添加到不存在的

panTo

函数中：

panTo（板条，选件？）

另外，您没有充分利用

L.Control

类的潜力。您仍然在类之外进行大量工作，附加eventhandler和实际的eventhandling等。请尝试类似的操作，以便将所有逻辑都包含在自定义控件类中（使用代码段中的传单，但也适用于Mapbox.js）：

var-map=新的L.map（'传单'{
“中心”：[0,0]，
“缩放”：0，
“层”：[
新的L.TileLayer（'/{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'{
“归属”：“©；贡献者，©；”
})
]
});
L.Control.Navigation=L.Control.extend({
选项：{
位置：'bottomleft'
},
onAdd：函数（映射）{
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='#'；
//不确定为什么需要数据属性
//因为我们可以直接使用下面的处理程序
link.dataset.lat=34.51702396789498；
link.dataset.lng=69.11893844604492；
link.dataset.zoom=12；
img.src='//placehold.it/150x150'；
L.DomEvent.addListener（链接“单击”，函数（e）{
//使用setView，因为它具有缩放功能
map.setView([
link.dataset.lat，
link.dataset.lng
]，link.dataset.zoom）；
});
返回容器；
}
});
map.addControl（新的L.Control.Navigation（））
正文{
保证金：0；
}
html，正文，#传单{
身高：100%；
}

单张0.7.7
事件目标不是您期望的，它是对
img
的引用，而不是包装
div
元素。您可以通过将
e.target
记录到您的控制台并检查其内容来捕获它。如果您使用
e.target.parentElement
，您就可以了。下一个错误是将缩放参数添加到不存在的
panTo
函数中：

panTo（板条，选件？）


另外，您没有充分利用
L.Control
类的潜力。您仍然在类之外进行大量工作，附加eventhandler和实际的eventhandling等。请尝试类似的操作，以便将所有逻辑都包含在自定义控件类中（使用代码段中的传单，但也适用于Mapbox.js）：


var-map=新的L.map（'传单'{
“中心”：[0,0]，
“缩放”：0，
“层”：[
新的L.TileLayer（'/{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'{
“归属”：“©；贡献者，©；”
})
]
});
L.Control.Navigation=L.Control.extend({
选项：{
位置：'bottomleft'
},
onAdd：函数（映射）{
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='#'；
//不确定为什么需要数据属性
//因为我们可以直接使用下面的处理程序
link.dataset.lat=34.51702396789498；
link.dataset.lng=69.11893844604492；
link.dataset.zoom=12；
img.src='//placehold.it/150x150'；
L.DomEvent.addListener（链接“单击”，函数（e）{
//使用setView，因为它具有缩放功能
map.setView([
link.dataset.lat，
link.dataset.lng
]，link.dataset.zoom）；
});
返回容器；
}
});
map.addControl（新的L.Control.Navigation（））
正文{
保证金：0；
}
html，正文，#传单{
身高：100%；
}

单张0.7.7
你又一次拯救了这一天！谢谢@iH8！你又救了一天！谢谢@iH8！