Google Maps Single JSON Наложение видимости на флажок - PullRequest
Новая
       34

Google Maps Single JSON Наложение видимости на флажок

0 голосов
/ 28 января 2020

Без разделения JSON на 5 отдельных файлов. Я хочу управлять видимостью каждого свойства JSON на основе флажка.

У меня есть один оверлейный файл JSON.

Каждая JSON функция имеет свойство AREAID.

Существует 5 значений AREAID:

  • area1
  • area2
  • area3
  • area4
  • area5

У меня также есть 5 флажков:

  • Область 1
  • Область 2
  • Область 3
  • Область 4
  • Область 5

Когда установлен флажок Область 1 Я хочу все свойства, которые содержат AREAID: область 1 должна быть видимой и т. Д. c.

. Из моего исследования я понимаю, что видимость свойства можно установить с помощью visible: true .

Я предполагаю, что мне нужна какая-то функция foreach .

Мой код пока 

function selectall(source) {
  checkboxes = document.getElementsByName('switch-two');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}			
			
function initAutocomplete() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 52.656963,
      lng: -112.506664
    },
    gestureHandling: 'greedy',
    mapTypeControl: false
  });

  var setMap = createArea('https://api.myjson.com/bins/iqree');


  function styleFunc(feature) {
    return {
      fillColor: feature.getProperty('COLOR'),
      strokeWeight: 1,
      strokeColor: 'black',
      fillOpacity: 0.4,
      strokeOpacity: 0.7,
      zIndex: 0
    };
  }

  // Infowindow
  var infoWindow = new google.maps.InfoWindow({
    zIndex: 2
  });
  map.addListener('click', function() {
    setMap.revertStyle();
    infoWindow.close();
  })

  function clickFunc(event) {
    this.revertStyle();
    this.overrideStyle(event.feature, {
      strokeWeight: 2,
      strokeColor: 'black',
      zIndex: 1
    });

    var CDNAME = event.feature.getProperty('CDNAME');
    var COLOR = event.feature.getProperty('COLOR');
   	var AREAID = event.feature.getProperty('AREAID');
    
    infoWindow.setPosition(event.latLng);
    infoWindow.setOptions({
      pixelOffset: {
        width: 0,
        height: -3
      }
    });

    infoWindow.setContent(
		"CDNAME: <b>" + CDNAME + "</b><br />" +
		"COLOR: <b>" + COLOR + "</b><br />" +
		"AREAID: <b>" + AREAID + "</b>"
    );
    infoWindow.open(map);
  }


  function mouseFunc(event) {
    this.revertStyle();
    this.overrideStyle(event.feature, {
      strokeWeight: 2,
      strokeColor: 'black',
      zIndex: 1
    });
  }

  function createArea(url) {
    var area = new google.maps.Data();
    area.loadGeoJson(url);
    area.setStyle(styleFunc);
    area.addListener('click', clickFunc);
    area.addListener('mouseover', mouseFunc);
    return area;
  }

  setArea();

  function setArea() {
    infoWindow.close();
    setMap.setMap(document.getElementById('area1').checked ? map : null);

  }

  google.maps.event.addDomListener(document.getElementById('area1'), 'click', setArea);
	
}
#map {
  height: 90%;
}

/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<form class="form">
  <div class="switch-field">
	  
<input type="checkbox" onClick="selectall(this)"/>Select All<br/>
	  
    <input type="checkbox" id="area1" name="switch-two" checked/>
    <label for="area1">Area 1</label>

    <input type="checkbox" id="area2" name="switch-two" />
    <label for="area2">Area 2</label>

    <input type="checkbox" id="area3" name="switch-two" />
    <label for="area3">Area 3</label>

    <input type="checkbox" id="area4" name="switch-two" />
    <label for="area4">Area 4</label>

    <input type="checkbox" id="area5" name="switch-two" />
    <label for="area5">Area 5</label>
  </div>
</form>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initAutocomplete" async defer></script>

1 Ответ

1 голос
/ 02 февраля 2020

Уровень данных Google Maps JavaScript API имеет метод forEach(), который позволяет переопределить видимость каждой функции в зависимости от состояния ваших флажков. Вам просто нужно создать функцию, например setAreaVisibility(), которая будет переопределять стили объектов и добавлять прослушиватели событий для change события каждого флажка, где вы будете вызывать setAreaVisibility().

Я изменил ваш пример, удалил части кода не имеет отношения к поведению флажков и создает setAreaVisibility() функцию, которая демонстрирует, как вы можете контролировать видимость каждой функции.

Посмотрите на этот пример кода. Также обратите внимание, что вам не следует создавать новый экземпляр слоя Data, поскольку карта по умолчанию создает один слой данных, и вы можете обращаться к нему как к объекту map.data. 

var map;
        
function initMap() {
  map = new google.maps.Map(
    document.getElementById('map'), 
    {
      zoom: 5,
      center: {
        lat: 52.656963,
        lng: -112.506664
      },
      gestureHandling: 'greedy',
      mapTypeControl: false
    }
  );

  map.data.loadGeoJson("https://api.myjson.com/bins/iqree");

  map.data.setStyle(function(feature){
     return {
      fillColor: feature.getProperty('COLOR'),
      strokeWeight: 1,
      strokeColor: 'black',
      fillOpacity: 0.4,
      strokeOpacity: 0.7,
      zIndex: 0
    }; 
  });

  checkboxes = document.getElementsByName('switch-two');
  checkboxes.forEach(function(checkbox) {
    google.maps.event.addDomListener(
        checkbox,
        'change', 
        setAreaVisibility
    );
  });    
}

function setAreaVisibility() {
    if (map) {
        map.data.forEach(function(feature){
            var areaCode = feature.getProperty('AREAID');
            var areaCheckBox = document.getElementById(areaCode);
            map.data.overrideStyle(feature, {
                visible: areaCheckBox.checked
            });
        });
    }
}

function selectall(source) {
  var checkboxes = document.getElementsByName('switch-two');
  checkboxes.forEach(function(checkbox) {
    checkbox.checked = source.checked;
  });
  setAreaVisibility();      
}	
#map {
  height: 90%;
}

/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<form class="form">
    <div class="switch-field">

        <input type="checkbox" onClick="selectall(this)" checked/>Select All<br/>

        <input type="checkbox" id="area1" name="switch-two" checked/>
        <label for="area1">Area 1</label>

        <input type="checkbox" id="area2" name="switch-two" checked/>
        <label for="area2">Area 2</label>

        <input type="checkbox" id="area3" name="switch-two" checked/>
        <label for="area3">Area 3</label>

        <input type="checkbox" id="area4" name="switch-two" checked/>
        <label for="area4">Area 4</label>

        <input type="checkbox" id="area5" name="switch-two" checked/>
        <label for="area5">Area 5</label>
    </div>
</form>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap" async defer></script>

Надеюсь, это поможет!

...