0

我正在使用带有 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);

现在，如果我想访问第一个参数，即点击函数内的印度，我应该使用什么？我咨询了 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>
4

1 回答 1

1

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

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

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

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

更好的方法是onEachFeature在层定义中添加一个函数（它读取 JSON）。就像这里的例子一样：http: //leafletjs.com/examples/geojson.html

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

L.geoJson(india, {
  onEachFeature: function (feature, layer) {
    layer.on('click', function (e) {
      alert(e.target.feature.id)
    })
  }
});
于 2014-06-03T09:06:31.430 回答