leaflet api事件監聽器參數訪問

我正在使用leaflet api和L.geoJson。代碼的部分是leaflet 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>

來源

2013-08-30 user609306

'22'是不是一個有效的標識符名稱，因此您必須使用括號符號而不是點符號來訪問它。你有沒有看過用'arr.0'訪問的數組？ –

@FelixKling謝謝.....但是當我使用數組符號它告訴 TypeError：this._layers [0]是undefined 我使用alert（this._layers [0] .feature.id）; – user609306

好吧，這隻意味着'this._layers'沒有屬性'0'，即位置爲'0'的元素。你說它有'22'屬性，那麼爲什麼不嘗試呢？ –

使用單擊處理程序給定id的具體傳單可能會導致問題，因爲如果加載其他地方傳單可以分配不同的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) 
    }) 
    } 
});

來源

2014-06-03 09:06:31 fritzvd

leaflet api事件監聽器參數訪問

回答

相關問題