Google Maps Single JSON Overlay Visibility on Checkbox

Question

在不将 JSON 分成 5 个单独的文件的情况下，我想根据复选框控制每个 JSON 属性的可见性。

我有一个 JSON 覆盖文件。

每个 JSON 功能都有一个属性 AREAID。

有 5 个 AREAID 值：

• 区域1
• 区域2
• 区域3
• 区域4
• 区域5

我还有 5 个复选框：

• 1区
• 2区
• 3区
• 4区
• 5区

当 Area 1 复选框被选中时，我希望所有包含 AREAID: area1 的属性都可见，等等。

根据我的研究，我了解到可以使用 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>

Answer 1

Google Maps JavaScript API 的数据层具有forEach() 方法，该方法允许根据复选框的状态覆盖每个功能的可见性。您只需要创建功能，例如setAreaVisibility() 将覆盖功能样式并为您将调用 setAreaVisibility() 的每个复选框的 change 事件添加事件侦听器。

我修改了您的示例，删除了与复选框行为无关的部分代码，并创建了 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>

我希望这会有所帮助！