2017-12-12 2 views
0

전단지 오버레이 레이어에 클릭 이벤트를 첨부하는 데 문제가 있습니다. 내 HTML의 <form><button>이며 클릭하면 큰지도 (외부 웹 사이트)에 연결됩니다. 나는 몇 가지 기본 레이어를 가지고 있기 때문에, 내가 링크는 층이 층에 클릭 해당 사이트를 가리 키도록 action 속성을 변경하려면 제어 :전단지에서 기본 레이어를 클릭하면 양식의 동작 속성을 동적으로 변경하는 방법은 무엇입니까?

<div id='map'></div> 
<form id='viewlarger' 
    action='https://www.openstreetmap.org/#map=15/14.5906/120.9799' 
    method='get' 
    target='_blank'> 
    <button>View larger map</button> 
</form> 

자바 스크립트에게 :

var map = L.map('map', { 
    center: [14.5906, 120.9799], 
    zoom: 15, 
    layers: [stamenTerr] 
}); 

var base = { 
    "Stamen Terrain": stamenTerr, 
    "Stamen Toner": stamenToner, 
}; 

L.control.layers(base).addTo(map); 

var largerButton = document.getElementById('viewlarger'); 

var stamenTerr = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png', { 
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', 
    subdomains: 'abcd' 
}); 

var stamenToner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', { 
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', 
    subdomains: 'abcd', 
    ext: 'png' 
}); 

I을 addEventListener를 사용하여 시도하지만, 레이어 컨트롤에서 다른베이스 레이어를 클릭 할 때 나는 제대로 링크를 변경할 수 없습니다

stamenTerr.addEventListener('click', function() { 
    largerButton.action = "http://maps.stamen.com/terrain/#15/14.5906/120.9799"; 
}); 

stamenToner.addEventListener('click', function() { 
    largerButton.action = "http://maps.stamen.com/toner/#15/14.5906/120.9799"; 
}); 

을 이 문제를 해결하는 방법을 확인해 주시겠습니까? 고맙습니다.

편집 :

내가 이것을 시도했지만 링크가 변경되지 않습니다

:

map.on('click', function() { 
    if (map.hasLayer(tileStamenToner)) { 
    viewLMapBtn.action = http://maps.stamen.com/toner/#15/14.5906/120.9799"; 
    }; 
}); 

답변

0

이 전단지에서 L.TileLayer의이 click 이벤트가없는 (또는 마우스의 다른 종류를/포인터 이벤트) . 대신

map.on('click', ...); 이벤트 핸들러를 사용, 눈에 보이는 쿼리 map.hasLayer(...)를 사용 TileLayer

+0

나는 당신이 제공 한 코드를 사용하는 방법을 이해하는 데 어려움을 겪고 죄송합니다. 나는 그 질문을 편집했다. 확인해주십시오. – JAT86

관련 문제