Fatal编程技术网
  • javascript/
  • Javascript 传单api事件侦听器参数访问

Javascript 传单api事件侦听器参数访问

javascript json leaflet

Javascript 传单api事件侦听器参数访问,javascript,json,leaflet,geojson,Javascript,Json,Leaflet,Geojson,我将传单api与L.geoJson一起使用。代码的部分是 var indiaLayer= L.geoJson(india, {style: {weight: 2, opacity: 1, color: '#F7BE81', dashArray: '10', fillOpacity: 0.2}}); 现在，我将indiaLayer上的事件侦听器定义为 indiaLayer.on('click', clicked); 现在，如果

我将传单api与L.geoJson一起使用。代码的部分是

var indiaLayer= L.geoJson(india, {style: {weight: 2,
        opacity: 1,
        color: '#F7BE81',
        dashArray: '10',
        fillOpacity: 0.2}});
现在，我将indiaLayer上的事件侦听器定义为

indiaLayer.on('click', clicked);
现在，如果我想访问第一个参数，即india inside clicked函数，我应该使用什么？。我查阅了dom树，发现它是

alert(this._layers.22.feature.id);
但是它抛出了语法错误。有人能帮我吗？多谢各位

我附上完整的代码也

<html>
<head>


<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="india.js" type="text/javascript"></script>

</head>


<body>
<div id = "map1" style="width: 1100px; height: 400px"> </div>
<div id = "zoom" style="width: 100px;  height: 100px"></div>
<div id = "select" style="width: 100px; height:100px"></div>

<script>



var area = L.map('map1', {center: [27.8800,78.0800], zoom: 4 });

L.tileLayer('http://a.tiles.mapbox.com/v3/raj333.map-gugr5h08/{z}/{x}/{y}.png').addTo(area);











function zoomDeal()

{

var zoom=document.getElementById("zoom");
zoom.innerHTML= area.getZoom();



}




area.on('zoomend',zoomDeal);



var indiaLayer= L.geoJson(india, {style: {weight: 2,
        opacity: 1,
        color: '#F7BE81',
        dashArray: '10',
        fillOpacity: 0.2}});

        area.addLayer(indiaLayer);

        function clicked(){

    if (area.getZoom() == 4) {

        if (this.options.style.fillOpacity == 0.5)
    {

        this.setStyle({fillOpacity: 0.2});
    this.options.style.fillOpacity=0.2;
    var select = document.getElementById("select");
    select.innerHTML = "";
    }

    else
    {   
    this.setStyle({fillOpacity: 0.5});   
    this.options.style.fillOpacity=0.5;  
    var select = document.getElementById("select");
    //select.innerHTML = "india";       
    alert(this._layers.22.feature.id);
    }
    }
        }

        indiaLayer.on('click', clicked);                
</script>
</body>
</html>


var area=L.map（'map1'，{center:[27.8800,78.0800]，zoom:4}）；
L.tileLayer（'http://a.tiles.mapbox.com/v3/raj333.map-gugr5h08/{z} /{x}/{y}.png'）.addTo（区域）；
函数zoomDeal（）
{
var zoom=document.getElementById（“zoom”）；
zoom.innerHTML=area.getZoom（）；
}
区域。on（'zoomend'，zoomDeal）；
var indiaLayer=L.geoJson（印度，{style:{weight:2，
不透明度：1，
颜色：“#F7BE81”，
dashArray:'10'，
fillOpacity:0.2}）；
面积。addLayer（indiaLayer）；
函数单击（）{
如果（area.getZoom（）==4）{
if（this.options.style.fillOpacity==0.5）
{
this.setStyle（{fillOpacity:0.2}）；
this.options.style.fillOpacity=0.2；
var select=document.getElementById（“select”）；
select.innerHTML=“”；
}
其他的
{   
this.setStyle（{fillOpacity:0.5}）；
this.options.style.fillOpacity=0.5；
var select=document.getElementById（“select”）；
//select.innerHTML=“印度”；
警报（this.\u layers.22.feature.id）；
}
}
}
indiaLayer.on（'click'，clicked）；
在单击处理程序中使用给定id的特定传单可能会导致问题，因为如果您在其他地方加载传单，传单可能会分配不同的id

默认情况下单击处理程序将抛出
事件
参数。这意味着如果您将单击的函数定义更改为：

function clicked (e) {
  // do stuff etc.
}
您将能够访问单击的原点（使用
e.target
）。在本例中，将显示图层

更好的方法是在层定义中添加一个
onEachFeature
函数（读取JSON）。如以下示例所示：

onEachFeature
（）允许您直接访问您尝试访问的功能，以便执行您想要的操作，例如：

L.geoJson(india, {
  onEachFeature: function (feature, layer) {
    layer.on('click', function (e) {
      alert(e.target.feature.id)
    })
  }
});

22
不是有效的标识符名称，因此必须使用括号符号，而不是点符号来访问它。你见过使用
arr.0
访问的数组吗？@FelixKling谢谢……但当我使用数组符号时，它会告诉TypeError:this.\u layers[0]未定义，我使用了alert（this.\u layers[0].feature.id）；嗯，这只意味着
this.\u层
没有属性
0
，即位于
0
位置的元素。你说它有属性
22
，那为什么不试试呢？@FelixKling谢谢……但我以前用过它，但它不起作用……你能告诉我该怎么办吗……我正在为我的dom树附加链接，也许它可以给你更多你尝试过的图片
这个。_layers[22]。feature.id
，但它不起作用？