JavaScript — Как включить / выключить слой геоджон на HTML-странице Google Maps

Как включить / отключить слой геоджон на html-странице Google Maps

Я сделал вам скрипку, чтобы продемонстрировать, как вы можете сделать с флажком. Смотрите https://jsfiddle.net/84e2xqrp/

 var map; var geojesonlayer1; var geojesonlayer2; function initialize() { map = new google.maps.Map(document.getElementById('map'), { center: { lng: -80.386962890625, lat: 43.40903821777055 }, zoom: 8 }); geojesonlayer1 = new google.maps.Data(); geojesonlayer2 = new google.maps.Data(); geojesonlayer1.loadGeoJson('https://www.mocky.io/v2/5daa5ee73100002d00becd13'); geojesonlayer2.loadGeoJson('https://www.mocky.io/v2/5daa5f293100007e00becd14'); //layer style geojesonlayer1.setStyle({ strokeColor: 'yellow', strokeWeight: 5 }); geojesonlayer2.setStyle({ strokeColor: 'blue', strokeWeight: 1 }); geojesonlayer1.setMap(map); geojesonlayer2.setMap(map); } $("#layer1_checkbox").change(function() { if (this.checked) { geojesonlayer1.setMap(map); } else { geojesonlayer1.setMap(null); } }); $("#layer2_checkbox").change(function() { if (this.checked) { geojesonlayer2.setMap(map); } else { geojesonlayer2.setMap(null); } }); initialize(); 
 {amp}lt;div id="map"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;hr /{amp}gt; Layer 1 {amp}lt;input id="layer1_checkbox" type="checkbox" checked /{amp}gt; Layer 2 {amp}lt;input id="layer2_checkbox" type="checkbox" checked /{amp}gt; 

У вас были основы логики кода, но вам нужно было подключить прослушиватели событий к вашим флажкам. В этом примере мы подключаем прослушиватель onChange (через jquery) к флажку и используем его проверенное состояние, чтобы определить, должен ли слой GeoJSON быть присоединен или отсоединен от экземпляра карты (который, по сути, показывает или скрывает его соответственно)

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector