如何在Google Maps HTML页面上打开/关闭geojson图层

Question

I'm confused about show and hide some geojson layer on a google map API V3 I want to set layer status by checkbox, i'dont know how to do this,

Now i'm able to set on more than 1 layer by the code below:

var geojesonlayer1 = new google.maps.Data();
var geojesonlayer2 = new google.maps.Data();
geojesonlayer1.loadGeoJson('mygeojson path');
geojesonlayer2.loadGeoJson('mygeojson path');
//layer style
geojesonlayer1.setStyle({
  strokeColor: 'yellow',
  strokeWeight: 5
});
geojesonlayer2.setStyle({
  strokeColor: 'blue',
  strokeWeight: 1
 });
//add layer to map
geojesonlayer1.setMap(map);
geojesonlayer2.setMap(map);
//remove layer from map
geojesonlayer1.setMap(null);
geojesonlayer2.setMap(null);

Answer 1

I made you a Fiddle to demonstrate how you can do with a checkbox. See 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();

<div id="map"></div>

<hr />

Layer 1 <input id="layer1_checkbox" type="checkbox" checked />
Layer 2 <input id="layer2_checkbox" type="checkbox" checked />

You had the fundamentals of the logic of the code but what you needed was to hookup event listeners to your checkboxes. In the example we connect an onChange listener (via jquery) to the checkbox and use it's checked state to determine if the GeoJSON layer should be attached or detach from the map instance (which essentially shows or hides it respectively)