javascript - 是否可以连接 KML 图层以在一个复选框(Google map )中显示它们？

Question

我创建了一个 Google map ，可在此处找到:http://userpages.flemingc.on.ca/~eluli/example3.html

由于谷歌地图KML大小限制，我不得不将KML图层分成三层(PC1、PC2、PC3)。我想知道是否可以连接这三层，以便它们仅由一个复选框表示和启动。

我的 JavaScript 代码:

var map, layer2, layers;
layers = [];
function initialize() {
    var ontario = new google.maps.LatLng(49.2867873, -84.7493416);

var mapOptions = {
        zoom: 5,
        center: ontario,
styles: [{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#e0efef"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"hue":"#1900ff"},{"color":"#c0e8e8"}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"visibility":"on"},{"lightness":700}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#7dcdcd"}]}]
    }

    var infoWindow = new google.maps.InfoWindow();
    var openInfoWindow = function (KMLevent) {
        infoWindow.close();
        infoWindow.setOptions(
        {
            content: KMLevent.featureData.infoWindowHtml,
            position: KMLevent.latLng,
            pixelOffset: KMLevent.pixelOffset
        });
        infoWindow.open(map);
    };

     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var kmlOptions = {
        suppressInfoWindows: true,  // do not to display an info window when clicked
        preserveViewport: false,
        map: map
    };



  //Layer 0 is NDP       
         layers [0] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkRGo1RlpVVW4td1k&export=download',
 {preserveViewport: false, suppressInfoWindows: true});
      //Layer 1 is Liberal    
        layers [1] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkdXd6aWFZc05uaWM&export=download',
 {preserveViewport: false, suppressInfoWindows: true});
        //Layer 2 is PC1 
        layers [2] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkYjhLenRqVWVuR0U&export=download',
 {preserveViewport: false, suppressInfoWindows: true});
// Layer 3 PC2
        layers [3] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkSlJZSDR2MzBOY1E&export=download',
 {preserveViewport: false, suppressInfoWindows: true});

        //Layer 4 PC3
        layers [4] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkSjNrck1MZmMydlE&export=download',
 {preserveViewport: false, suppressInfoWindows: true});
        //layer 5 Schools
        layers [5] = new google.maps.KmlLayer('https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkajc2OGZTZDZBV0k&export=download',
 {preserveViewport: false, suppressInfoWindows: true});


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



    layer2 = new google.maps.FusionTablesLayer({
    query: {
      select: 'col9',
      from: '1FzRSqRcxY37i7VtejqONHhAB-MrzFhakYSvZaIvo'
    }
  });
  layer2.setMap(map);

   // Pop-up window
   /* layers.forEach(function(url) {
        var layer = new google.maps.KmlLayer(url, kmlOptions);
        layer.setMap(map);
        google.maps.event.addListener(layer, "click", openInfoWindow);

    });*/

}


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

//initialize();
google.maps.event.addDomListener(window, 'load', initialize);

我的 HTML 代码:

<div id="map-canvas"></div>
<div id="checkboxes">
  <input type="checkbox" id="layer0" onclick="toggleLayer(0)">NDP <br>
  <input type="checkbox" id="layer1" onclick="toggleLayer(1)">Liberal <br>
  <input type="checkbox" id="layer2" onclick="toggleLayer(2)">PC1 <br>
  <input type="checkbox" id="layer3" onclick="toggleLayer(3)">PC2 <br>
  <input type="checkbox" id="layer4" onclick="toggleLayer(4)">PC3 <br>
  <input type="checkbox" id="layer5" onclick="toggleLayer(5)">Schools 
</div>

我的CSS:

   html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px;
}
   #checkboxes {
  position: absolute;
  top: 30px;
  right: 10px;
  font-family: 'arial', 'sans-serif';
  font-size: 14px;
  background-color: white;
    border-width:2px;   
    border-style:groove;

}

Answer 1

这有效，(缩放到最后一个区域):

<div id="checkboxes">
  <input type="checkbox" id="layer0" onclick="toggleLayer(0)">NDP <br>
  <input type="checkbox" id="layer1" onclick="toggleLayer(1)">Liberal <br>
  <input type="checkbox" id="layer2" onclick="toggleLayer(2);toggleLayer(3);toggleLayer(4);">PC <br>
  <input type="checkbox" id="layer5" onclick="toggleLayer(5)">Schools 
</div>

我会通过在这三个层上设置preserveViewport: true来解决这个问题。

fiddle