Leaflet: Leaflet 1.0.0-rc.3의 Geojson λ ˆμ΄μ–΄μ—μ„œ μž‘λ™ν•˜μ§€ μ•ŠλŠ” λ‹¨μˆœ 클릭 ν•Έλ“€λŸ¬

에 λ§Œλ“  2016λ…„ 08μ›” 26일  Β·  4μ½”λ©˜νŠΈ  Β·  좜처: Leaflet/Leaflet

λ‚˜λŠ” http://jsfiddle.net/tator/em9cLfk4/4/ 와 λΉ„μŠ·ν•œ μΌμ„ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

κ·ΈλŸ¬λ‚˜ 이것은 맡 클릭 ν•Έλ“€λŸ¬μ— λ²„λΈ”λ§λœ λ ˆμ΄μ–΄ 클릭과 관련이 μ—†μŠ΅λ‹ˆλ‹€. λ ˆμ΄μ–΄ 클릭이 0.7.7μ—μ„œ μ œλŒ€λ‘œ μž‘λ™ν•˜λŠ” μ½”λ“œλ‘œ νŠΈλ¦¬κ±°λ˜μ§€ μ•ŠλŠ”λ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€.

λ ˆμ΄μ–΄ μˆœμ„œ zindex λ¬Έμ œκ°€ μ—†λŠ”μ§€ ν™•μΈν•˜κΈ° μœ„ν•΄ κΈ°λ³Έ 타일 λ ˆμ΄μ–΄ + ν•˜λ‚˜μ˜ μ˜€λ²„λ ˆμ΄ λ ˆμ΄μ–΄λ‘œ μ½”λ“œλ₯Ό μ€„μ˜€μŠ΅λ‹ˆλ‹€.

map.on("click")은 μ—¬μ „νžˆ β€‹β€‹μ œλŒ€λ‘œ μ‹€ν–‰λ˜μ§€λ§Œ GeoJson λ ˆμ΄μ–΄μ—μ„œλŠ” μ‹€ν–‰λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

function onEachFeatureHandler(feature, layer){
            layer.on('click', function(e){
                     alert("click");
           });
}

overlay = L.geoJson(GeoJSON, {
       onEachFeature: onEachFeatureHandler
});

λ˜ν•œ layer.on("click")을 μˆ˜ν–‰ν•˜λŠ” 두 가지 λ‹€λ₯Έ 방법을 μ‹œλ„ν–ˆμŠ΅λ‹ˆλ‹€. λ¬Έμžμ—΄λ‘œ ν΄λ¦­ν•˜κ±°λ‚˜ {"click": handlerFuncName}을 μΆ”κ°€ν•©λ‹ˆλ‹€. μ˜ˆμƒλŒ€λ‘œ 차이가 μ—†μŠ΅λ‹ˆλ‹€.

μ˜€λ²„λ ˆμ΄ 전후에 κΈ°λ³Έ 타일 λ ˆμ΄μ–΄λ₯Ό μΆ”κ°€ν•˜λ €κ³  μ‹œλ„ν–ˆμ§€λ§Œ 아무 것도 λ³€κ²½λ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€. λ˜ν•œ 이벀트 μΆ©λŒμ„ ν”Όν•˜κΈ° μœ„ν•΄ μ§€λ„μ—μ„œ 클릭 ν•Έλ“€λŸ¬λ₯Ό μ œκ±°ν–ˆμŠ΅λ‹ˆλ‹€. κ·Έλž˜μ„œ 타일 + μ˜€λ²„λ ˆμ΄μ™€ ν•œ 번의 클릭 이벀트 ν•Έλ“€λŸ¬κ°€ μžˆλŠ” 맡으둜 λλ‚©λ‹ˆλ‹€. ν•˜μ§€λ§Œ μ—¬μ „νžˆ 아무 것도 μ‹€ν–‰λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. 마우슀 μ»€μ„œλŠ” λ ˆμ΄μ–΄λ₯Ό μ „ν˜€ 클릭할 수 μ—†μŒμ„ λ‚˜νƒ€λƒ…λ‹ˆλ‹€.

λ˜ν•œ μ˜€λ²„λ ˆμ΄ 색상을 μˆ˜μ •ν•˜μ—¬ 지도 κ°œμ²΄μ— μ œλŒ€λ‘œ μΆ”κ°€λ˜μ—ˆλŠ”μ§€ ν™•μΈν–ˆμŠ΅λ‹ˆλ‹€. νƒ€μΌλ ˆμ΄μ–΄ μœ„μ— μžˆμŠ΅λ‹ˆλ‹€.

이것은 Mac의 μ΅œμ‹  Chrome v52 및 Safari 9μ—μ„œ λ°œμƒν•©λ‹ˆλ‹€.

이것에 λŒ€ν•΄ 거의 4μ‹œκ°„ λ™μ•ˆ μ‹œλ„ν•œ ν›„... λ‚΄ μ½”λ“œμ— λ­”κ°€ λ©μ²­ν•œ 것이 μžˆκ±°λ‚˜ λ³€κ²½ λ‘œκ·Έμ—μ„œ λˆ„λ½λœ API λ³€κ²½ 사항이 μžˆλŠ” 것 κ°™μŠ΅λ‹ˆλ‹€. μ œκ°€ 뭘 잘λͺ»ν•˜κ³  μžˆμ—ˆλŠ”μ§€ 쑰언을 ν•΄μ£Όμ‹œλ©΄ κ°μ‚¬ν•˜κ² μŠ΅λ‹ˆλ‹€. μ–΄λ–€ 톡찰λ ₯이라도 κ°μ‚¬ν•˜κ² μŠ΅λ‹ˆλ‹€.

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

@mourner μž μ‹œ μƒκ°ν•œ ν›„ CSSλ₯Ό μ΅œμ‹ μœΌλ‘œ μ—…λ°μ΄νŠΈν•˜μ§€ μ•Šμ•˜λ‹€λŠ” 것을 κΉ¨λ‹¬μ•˜μŠ΅λ‹ˆλ‹€. zIndex 레벨이 μ˜¬λ°”λ₯΄μ§€ μ•Šκ±°λ‚˜ 일뢀 클릭 이벀트λ₯Ό ν—ˆμš©ν•˜μ§€ μ•ŠλŠ” 데 κΈ°μ—¬ν–ˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€. 이제 CSSλ₯Ό μ΅œμ‹ μœΌλ‘œ μ—…λ°μ΄νŠΈν•˜κΈ°λ§Œ ν•˜λ©΄ λͺ¨λ“  것이 정상인 것 κ°™μŠ΅λ‹ˆλ‹€. 문제λ₯Ό λ‹«μŠ΅λ‹ˆλ‹€.

λͺ¨λ“  4 λŒ“κΈ€

문제λ₯Ό μž¬ν˜„ν•˜λŠ” JSFiddle λ˜λŠ” Leaflet Playgroundμ—μ„œ μ •ν™•ν•œ μ΅œμ†Œ ν…ŒμŠ€νŠΈ μΌ€μ΄μŠ€λ₯Ό μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆκΉŒ?

@mourner κ°„λ‹¨ν•œ Geojson으둜 놀이터λ₯Ό μ‹œλ„ν•˜κ³  μ–΄λ–€ 일이 μΌμ–΄λ‚˜λŠ”μ§€ λ³Ό κ²ƒμž…λ‹ˆλ‹€. 맀우 격리된 μ˜ˆμ œμ—μ„œ 클릭 ν•Έλ“€λŸ¬ μ½”λ“œκ°€ μ†μƒλ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€. λ””λ²„κ±°μ—μ„œ λ ˆμ΄μ–΄ κ°œμ²΄κΉŒμ§€ λ””λ²„κΉ…ν–ˆλŠ”λ°... 클릭 ν•Έλ“€λŸ¬κ°€ ν™•μ‹€νžˆ μΆ”κ°€λ˜μ—ˆμŠ΅λ‹ˆλ‹€. λ ˆμ΄μ–΄λ₯Ό ν΄λ¦­ν•˜λ©΄ <img> νƒ€μΌμ—μ„œ 클릭 μ΄λ²€νŠΈκ°€ λ°œμƒν•©λ‹ˆλ‹€.

λ‚˜λŠ” 이것에 영ν–₯을 λ―ΈμΉ˜λŠ” λ‹€λ₯Έ μš”μΈμ„ 생각할 수 μ—†μŠ΅λ‹ˆλ‹€.

@mourner λŠ” 방금 λ†€μ΄ν„°μ—μ„œ rc3으둜 μ‹œλ„ν–ˆμ§€λ§Œ μ›μ‹œ geojson λ ˆμ΄μ–΄λŠ” μ—¬μ „νžˆ μ˜λ„ν•œ λŒ€λ‘œ μž‘λ™ν•©λ‹ˆλ‹€...

@mourner μž μ‹œ μƒκ°ν•œ ν›„ CSSλ₯Ό μ΅œμ‹ μœΌλ‘œ μ—…λ°μ΄νŠΈν•˜μ§€ μ•Šμ•˜λ‹€λŠ” 것을 κΉ¨λ‹¬μ•˜μŠ΅λ‹ˆλ‹€. zIndex 레벨이 μ˜¬λ°”λ₯΄μ§€ μ•Šκ±°λ‚˜ 일뢀 클릭 이벀트λ₯Ό ν—ˆμš©ν•˜μ§€ μ•ŠλŠ” 데 κΈ°μ—¬ν–ˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€. 이제 CSSλ₯Ό μ΅œμ‹ μœΌλ‘œ μ—…λ°μ΄νŠΈν•˜κΈ°λ§Œ ν•˜λ©΄ λͺ¨λ“  것이 정상인 것 κ°™μŠ΅λ‹ˆλ‹€. 문제λ₯Ό λ‹«μŠ΅λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰