javascript - 如何在 google map html 页面上打开/关闭 geojson 图层

Question

我对在谷歌地图 API V3 上显示和隐藏一些 geojson 图层感到困惑 我想通过复选框设置图层状态，我不知道该怎么做，

现在我可以通过下面的代码设置超过 1 层:

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

我为您制作了一个 fiddle 来演示如何使用复选框。请参阅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 />

您已经掌握了代码逻辑的基础知识，但您需要的是将事件监听器连接到复选框。在示例中，我们将 onChange 监听器(通过 jquery)连接到复选框，并使用其选中状态来确定 GeoJSON 图层是否应附加到 map 实例或从 map 实例中分离(实际上分别显示或隐藏它)