如何在加载页面时显示一个 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 />

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

 公交 C34

toggleLayer(2);

概念验证小提琴

代码片段：

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>