- ベストアンサー
Google Mapでチェックボックスを使い、wikiを表示させたり非表示にする方法
- Google Mapでチェックボックスを使ってwikiを表示させたり非表示にする方法について教えてください。
- IE（８）、Chrome（５）、FireFOX（１）で確認しましたがうまくいきません。
- ページをロードするとGoogle Mapが表示され、Wikiのチェックボックスをチェックするとwikiが表示されることは確認できましたが、チェックを外すとwikiが非表示になりません。どのようにすれば解決できるでしょうか？
- jianyuanyu
- お礼率50% (4/8)
- JavaScript
- 回答数2
- ありがとう数13
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
効率よくするなら、 <body> <div id="map" style="width: 600px; height: 600px"></div><br> <form name="f1"> <input type="checkbox" />Wiki<br /> </form> <script type="text/javascript"> //<![CDATA[ window.onload = load; window.onunload = GUnload; var map; function load(){ map = new GMap2( document.getElementById("map")); var centerPos = new GLatLng(35.6984,139.7732); map.setCenter(centerPos, 13 ); var wiki = new GLayer("org.wikipedia.ja"); map.addOverlay(wiki); wiki.hide(); if(document.f1.elements[0].checked == true){ wiki.show(); } GEvent.bindDom(document.f1.elements[0],"click",wiki,function(eve){ var node = eve?eve.target:event.srcElement; if (node.checked == true) { wiki.show(); }else{ wiki.hide(); } }); } //]]> </body> ですね。
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
<INPUT type="checkbox" onClick="getCheck(0)">Wiki<br> function getCheck(obj){} のような直接のDOMのonclickイベント追加は止めて、 <form name="f1"> <input type="checkbox" checked="false" />Wiki<br /> </form> に対し、 load()のファンクション内に var wiki = new GLayer("org.wikipedia.ja"); GEvent.bindDom(document.f1.elements[0],"click",wiki,function(){ if (document.f1.elements[0].checked == true) { //wiki.show(); map.addOverlay(wiki); }else{ //wiki.hide(); map.removeOverlay(wiki); } }); if(document.f1.elements[0].checked == true){ map.addOverlay(wiki); } と書けばよい。 ※本当は、removeOverlayやaddOverlayを都度やるより、 GLayerオブジェクトのhide(),show()のメソッドを使った 方がよさげです。
お礼
詳しく解説いただき、コードまでありがとうございました。 とても勉強になりました！！