加载页面时如何显示一个 kml 层？

Question

我有一个带有谷歌地图的页面，其中显示了当您单击图例中的复选框时可以看到的几个 kml 文件。 如何配置地图，以便在加载页面时只看到 layer2，就好像它已经被点击了一样？

源码为：

<script type="text/javascript"> 
var map;

var layers = [];

function initialize() {
    var myLatLng = new google.maps.LatLng(37.18186,-3.58843);
    var myOptions = {
zoom: 15,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: false
}

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var legend = document.getElementById('legend');

map.controls[google.maps.ControlPosition.TOP_RIGHT].push
(document.getElementById('legend'));


var noPoi = [ 
    {
    featureType: "poi",
    stylers: [
      { visibility: "off" }
    ]   
      }
];

map.setOptions({styles: noPoi});



layers [0] = new google.maps.KmlLayer('https://granadainfo.com/googlemaps/kml/L33-2018.kml', 
  {preserveViewport: true, suppressInfoWindows: false});
layers [1] = new google.maps.KmlLayer('https://granadainfo.com/googlemaps/kml/C31-2018.kml', 
  {preserveViewport: true, suppressInfoWindows: false});
layers [2] = new google.maps.KmlLayer('https://granadainfo.com/googlemaps/kml/C34-2018.kml', 
  {preserveViewport: true, suppressInfoWindows: false});
layers [3] = new google.maps.KmlLayer('https://granadainfo.com/googlemaps/kml/C30-2018.kml', 
  {preserveViewport: true, suppressInfoWindows: false});

for (var i = 0; i < layers.length; i++) {
        layers[i].setMap(null);
      }
}

function toggleLayer(i) {
  if (layers[i].getMap() === null) {
    layers[i].setMap(map);
  }
  else {
    layers[i].setMap(null);
  }
}
</script>

html代码是：

<div id="map_canvas"></div>
<div id="legend">
<p>
<input type="checkbox" id="layer0" onClick="toggleLayer(0)"/>&nbsp;Bus 33<br />
<input type="checkbox" id="layer1" onClick="toggleLayer(1)"/>&nbsp;Bus C31<br />
<input type="checkbox" id="layer2" onClick="toggleLayer(2)"/>&nbsp;Bus C34<br />
<input type="checkbox" id="layer3" onClick="toggleLayer(3)"/>&nbsp;Bus C30<br />

</div>

Answer 1

你需要做两件事：

1. 将默认复选框设置为“选中”。

<input type="checkbox" id="layer2" onClick="toggleLayer(2)" checked="checked"/>&nbsp;Bus C34<br />

1. 为要显示的图层调用toggleLayer 函数。

 巴士 C34

toggleLayer(2);

proof of concept fiddle

代码 sn-p：

var map;

var layers = [];

function initialize() {
  var myLatLng = new google.maps.LatLng(37.18186, -3.58843);
  var myOptions = {
    zoom: 15,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
  }

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var legend = document.getElementById('legend');

  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById('legend'));


  var noPoi = [{
    featureType: "poi",
    stylers: [{
      visibility: "off"
    }]
  }];

  map.setOptions({
    styles: noPoi
  });



  layers[0] = new google.maps.KmlLayer('https://granadainfo.com/googlemaps/kml/L33-2018.kml', {
    preserveViewport: true,
    suppressInfoWindows: false
  });
  layers[1] = new google.maps.KmlLayer('https://granadainfo.com/googlemaps/kml/C31-2018.kml', {
    preserveViewport: true,
    suppressInfoWindows: false
  });
  layers[2] = new google.maps.KmlLayer('https://granadainfo.com/googlemaps/kml/C34-2018.kml', {
    preserveViewport: true,
    suppressInfoWindows: false
  });
  layers[3] = new google.maps.KmlLayer('https://granadainfo.com/googlemaps/kml/C30-2018.kml', {
    preserveViewport: true,
    suppressInfoWindows: false
  });

  for (var i = 0; i < layers.length; i++) {
    layers[i].setMap(null);
  }
  toggleLayer(2);
  google.maps.event.addListener(layers[2], 'defaultviewport_changed', function() {
    map.fitBounds(layers[2].getDefaultViewport())
  });
}

function toggleLayer(i) {
  if (layers[i].getMap() === null) {
    layers[i].setMap(map);
  } else {
    layers[i].setMap(null);
  }
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map_canvas {
  height: 100%;
}


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

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map_canvas"></div>
<div id="legend">
  <p>
    <input type="checkbox" id="layer0" onClick="toggleLayer(0)" />&nbsp;Bus 33<br />
    <input type="checkbox" id="layer1" onClick="toggleLayer(1)" />&nbsp;Bus C31<br />
    <input type="checkbox" id="layer2" onClick="toggleLayer(2)" checked="checked" />&nbsp;Bus C34<br />
    <input type="checkbox" id="layer3" onClick="toggleLayer(3)" />&nbsp;Bus C30<br />
  </p>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>