2014-10-07 61 views
1

我試圖在使用L.GeoJSON(data).addTo(map)的傳單地圖上繪製國家/地區形狀。然後我要綁定一個彈出該國形狀的單擊事件...在圖層組上打開傳單

new L.GeoJSON(data, { 
    onEachFeature: function(feature, layer) { 
    layer['on']('click', popupFunction); 
    } 
}).addTo(this.map); 


popupFunction = function(event) { 
    var layer = event.target; 

    // Open the 'add' popup and get our content node 
    var bound = layer.bindPopup(
    "<div>Hello World!</div>" 
).openPopup(); 

    // Ugly hack to get the HTML content node for the popup 
    // because I need to do things with it 
    var contentNode = $(bound['_popup']['_contentNode']); 
} 

現在,當該數據是一個多邊形這工作得很好,因爲那時layer屬性傳遞給onEachFeature功能就是這樣: 一層。

但是,如果data是一個多面(即美國),這將停止,因爲「layer」的工作現在是一個圖層組(它有一個_layers)屬性,因此沒有_popup屬性,所以我不能讓_contentNode爲彈出。

看來這應該是一個相當普遍的事情,希望在layerGroup上彈出。爲什麼它沒有_popup屬性?

回答

0

您不能將L.Popup綁定到L.Layer以外的任何其他物件,因爲該彈出物將會錨定一些座標。

對於L.Marker,它將是位置(L.Latlng),對於L.Polygon它將成爲中心(請看the code以瞭解它是如何計算的)。

至於其他情況下(如你),你可以打開一個彈出,但你將不得不決定彈出打開其中:

var popup = L.popup() 
    .setLatLng(latlng) 
    .setContent('<p>Hello world!<br />This is a nice popup.</p>') 
    .openOn(map); 
0

首先,你應該能夠在類似的綁定彈出教程Using GeoJSON with Leaflet。類似這樣的:

var geoJsonLayer = L.geoJson(data, { 
    onEachFeature: function(feature, layer) { 
    layer.bindPopup('<div>Hello World!</div>'); 
    } 
}).addTo(map); 

如何進一步處理您的popUps取決於您的用例。這也許能爲你夠:

geoJsonLayer.eachLayer(function(layer) { 
    var popUp = layer._popup; 
    // process popUp, maybe with popUp.setContent("something"); 
}); 

希望這有助於..

1

簡短的回答:圖層組不支持彈出

B計劃:

你應該考慮使用FeatureGroup,它擴展LayerGroup並具有bindPopup方法,這是一個示例

L.featureGroup([marker1, marker2, polyline]) 
 
    .bindPopup('Hello world!') 
 
    .on('click', function() { alert('Clicked on a group!'); }) 
 
    .addTo(map);

+0

如果這解決了您的問題,請將其設置爲正確答案 – 2016-12-21 11:43:01