2013-03-29 27 views
6

Ứng dụng web django của tôi nên thực hiện như sau: Chuyển đối tượng Geojson sang chế độ xem, ánh xạ các điểm bằng tờ rơi và hiển thị một số thông tin bổ sung khi người dùng nhấp vào điểm đánh dấu điểm. Tôi không quen thuộc với js vì vậy tôi đã bị mắc kẹt ràng buộc đúng loại dữ liệu để sự kiện click. Đây là một đối tượng geojson mẫu. Làm cách nào để truy cập 'id' với sự kiện click của tôi?JS tờ rơi: Làm thế nào để vượt qua (Geo-) json ID để bấm vào sự kiện?

var geojsonFeature = {'geometry': 
          {'type': 'MultiPoint', 
          'coordinates': [[4.939, 52.33], [4.9409, 52.33]] 
          }, 
        'type': 'Feature', 
        'properties': 
         {'id': '52','popupContent': 'id=52'} 
        }; 

Thêm đối tượng GeoJSON vào bản đồ ..

var gj = L.geoJson(geojsonFeature, { 
    pointToLayer: function (feature, latlng) { 
    return L.circleMarker(latlng, geojsonMarkerOptions); 
    }}).addTo(map); 

on() -Click ....

gj.on('click', function(evt) { 
    alert(id) // well, this is where I need help 
}); 

LƯU Ý: Tôi không muốn sử dụng cái gì đó như bindPopup(feature.properties.popupContent) vì tôi muốn mở một cửa sổ mới gọi một chế độ xem django khác với một số dữ liệu bổ sung từ cơ sở dữ liệu.

Trả lời

13

Đối với mọi người có vấn đề tương tự: Những gì bạn muốn sử dụng là chức năng onEachFeature. Tính năng này đại diện cho một đối tượng geojson. Sử dụng dữ liệu mẫu được cung cấp ở trên id có thể được truy cập thông qua feature.properties.popupContent.

function onEachFeature(feature, layer) { 
    layer.on('click', function (e) { 
     alert(feature.properties.popupContent); 
     //or 
     alert(feature.properties.id); 
    }); 
} 
+0

yêu em bạn thân sau khi đã tìm kiếm một đêm tôi đã nhận câu trả lời này. –

2

Sau khi thử các giải pháp đăng tải trên mà không thành công, tôi có phiên bản này để làm việc:

function onEachFeature(feature, layer) { 
    layer.on('click', function (e) { 
     alert(e.target.feature.properties.popupContent); 
     //or 
     alert(e.target.feature.properties.id); 
    }); 
} 
Các vấn đề liên quan