リーフレットのオーバーレイレイヤーにクリックイベントを添付する際に問題があります。私の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>
はJavaScript:
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> — Map data © <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> — Map data © <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";
});
これを修正する方法を確認してください。ありがとうございました。
EDIT:
私はこれを試してみましたが、リンクは変更されません:リーフレットで
map.on('click', function() {
if (map.hasLayer(tileStamenToner)) {
viewLMapBtn.action = http://maps.stamen.com/toner/#15/14.5906/120.9799";
};
});
私は私はあなたが提供したコードを使用する方法を理解する難しさを抱えていて申し訳ありません。私はその質問を編集した。チェックしてください。 – JAT86