Leaflet.jsのチェックボックスでどれが選ばれているか?を調べたく、
このleafletのサンプルを元に
http://leafletjs.com/examples/layers-control/example.html
チェックボックスの(動的な)ソースを見た所、inputには下記のような
ネーム属性がないものでした。
html
1<form class="leaflet-control-layers-list"> 2 <div class="leaflet-control-layers-base"> 3 <label><div> 4 <input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers"> 5 <span> osm</span> 6 </div></label> 7 </div> 8 9 <div class="leaflet-control-layers-separator"></div> 10 11 <div class="leaflet-control-layers-overlays"> 12 13 <label><div> 14 <input type="checkbox" class="leaflet-control-layers-selector" checked=""> 15 <span>オーバーレイ01</span> 16 </div></label> 17 <label><div> 18 <input type="checkbox" class="leaflet-control-layers-selector"> 19 <span>オーバーレイ02</span> 20 </div></label> 21 <label><div> 22 <input type="checkbox" class="leaflet-control-layers-selector"> 23 <span>オーバーレイ03</span> 24 </div></label> 25 26 </div> 27</form>
htmlに下記のようなコードを付け加えてみたのですが、
(////ここでどのチェックボックスがチェックされているか確認 の部分)
チェックボックス自体が無くなってしまいました、、
アドバイス頂けたら助かります。
追記:jQueryを入れていないのにjQuery記述で動くはずがありませんでした。しかしやはり動きません
html
1 2<!DOCTYPE html> 3<html> 4<head> 5 6 <title>Layers Control Tutorial - Leaflet</title> 7 8 <meta charset="utf-8" /> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 10 <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 11 <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> 12 13 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" /> 14 <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script> 15 16 17 <style> 18 #map { 19 width: 600px; 20 height: 400px; 21 } 22 </style> 23 24 25</head> 26<body> 27 28<div id='map'></div> 29 30<script> 31 var cities = new L.LayerGroup(); 32 33 L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities), 34 L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities), 35 L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities), 36 L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities); 37 38 39 var mbAttr = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 40 '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 41 'Imagery © <a href="http://mapbox.com">Mapbox</a>', 42 mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw'; 43 44 var grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}), 45 streets = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr}); 46 47 var map = L.map('map', { 48 center: [39.73, -104.99], 49 zoom: 10, 50 layers: [grayscale, cities] 51 }); 52 53 var baseLayers = { 54 "Grayscale": grayscale, 55 "Streets": streets 56 }; 57 58 var overlays = { 59 "Cities": cities 60 }; 61 62////ここでどのチェックボックスがチェックされているか確認 start 63 var check_val = $('.leaflet-control-layers-selector:checked').val(); 64 console.log(check_val); 65////ここでどのチェックボックスがチェックされているか確認 end 66 67 L.control.layers(baseLayers, overlays).addTo(map); 68</script> 69</body> 70</html> 71
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/15 15:43
2016/12/16 01:54
2016/12/16 12:40