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

クリックした関数内の最初の引数、つまり india にアクセスしたい場合は、何を使用すればよいですか? 私はドムツリーに相談し、それが

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 を割り当てる可能性があるためです。

デフォルトのクリック ハンドラーは、引数をスローし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 に答える