Question

我正在使用带有L.geoJson的传单api。代码部分是

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>

Answer 1

使用click处理程序中给定id的特定传单可能会导致问题，因为如果您在其他地方加载，Leaflet可能会分配不同的ID。

默认情况下的单击处理程序会引发event参数。这意味着如果您将单击的函数定义更改为：

function clicked (e) {
  // do stuff etc.
}

您将能够访问点击的来源（e.target）。在这种情况下是图层。

更好的是将onEachFeature函数添加到图层定义（它会读出JSON）。就像这里的例子一样：http://leafletjs.com/examples/geojson.html

onEachFeature（http://leafletjs.com/reference.html#geojson-oneachfeature）可让您直接访问您尝试访问的功能，以便执行您想要的操作，例如：

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

传单api事件监听器参数访问

1 个答案: