Question

我正在构建自定义Google地图（http://www.southdevonaonb.org.uk/cordialemapping/），我在打开和关闭图层时遇到问题。

我在html中使用了一个简单的复选框 - 例如：

Parish boundary line <input type="checkbox" id="layer100" onclick="toggleLayer(100)"  checked><br /> 
Letterbox locations and results <input type="checkbox" id="layer0" onclick="toggleLayer(0)" checked><br />
Landscape challenges <input type="checkbox" id="layer1" onclick="toggleLayer(1)" checked><br />

以及以下JavaScript：

var geocoder;
var map; 
var marker;
var layers = [];

function initialize() {
geocoder = new google.maps.Geocoder ();
var latlng = new google.maps.LatLng (50.31697, -3.670807);
var myOptions = {
  zoom: 10,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
    }
  map = new google.maps.Map(document.getElementById("map-container"),
    myOptions);
  marker = new google.maps.Marker({map:map});

  layers[100] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/100.kml', {preserveViewport: true});
  layers[200] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/200.kml', {preserveViewport: true});
  layers[300] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/boundaryline.kml', {preserveViewport: true});




  layers[0] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/beta0.kml', {preserveViewport: true});
  layers[1] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/beta1.kml', {preserveViewport: true});
  layers[2] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/beta2.kml', {preserveViewport: true});
  layers[10] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/beta10.kml', {preserveViewport: true});
  layers[11] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/beta11.kml', {preserveViewport: true});
  layers[46] = new google.maps.KmlLayer('http://www.southdevonaonb.org.uk/cordialemapping/kmzdata/holbeton.kml', {preserveViewport: true});
  for (var i = 1; i < layers.length; i++) {
    layers[i].setMap(map);
  }
    }
function codeAddress () {
    var address = document.getElementById ("address").value;
    geocoder.geocode ( { 'address': address}, function(results, status)  {
    if (status == google.maps.GeocoderStatus.OK)  {
        map.setCenter(results [1].geometry.location);
        marker.setPosition(results [1].geometry.location);
        map.setZoom(14);
        } 
    else {
        alert("Geocode was not successful for the following reason: " + status);
            }
}); 
}

function toggleLayer(i) {
  if(layers[i].getMap() === null) {
    layers[i].setMap(map);
  }
  else {
    layers[i].setMap(null);
  }
}
  google.maps.event.addDomListener(window, 'load', initialize);

您将从脚本中看到我还没有添加上面链接的页面列表中的所有图层，并且我使用jQuery Accordian插件在选项卡中设置了菜单。

我到目前为止添加的图层打开和关闭都没关系，但我得到的问题是，当页面加载时，有时会显示一个图层，有时它会被隐藏，并且需要勾选几个复选框在它出现之前的几倍。

我正在尝试找到解决方法来解决此问题，以便首先加载地图页面，取消选中复选框并隐藏图层。然后勾选一个复选框，当复选框未选中时，图层将打开然后再关闭？

Answer 1

设置myOptions变量后，您缺少一个半冒号。

我正在使用您的代码找到更多问题来更新此内容。

将地图设置为图层的for循环不正确。 layers数组的长度为301，但这是因为您在索引300处手动设置了一个项目。当包含值的数组索引之间存在间隙时，您无法盲目地遍历图层数组。如果你真的想做一个for循环，那么你需要安全检查索引，如此

for (var i = 1; i < layers.length; i++) {
    if (typeof layers[i] != 'undefined') {
        layers[i].setMap(map);
    }
}

Answer 2

虽然我没有找到相关文档，但根据我的经验，Google Maps API一次不会在地图上显示超过5个KML图层（这类似于对FusionTablesLayers的限制，已记录{ {3}}）。

如果您不希望图层在加载时显示，请不要在setMap函数中调用initialize。然后，只有已经“检查”（并已添加到toggleLayer函数中的地图中）的图层才会显示在地图上。

你应该添加一个注释，添加超过5层到地图将不起作用，或者你可以添加代码来跟踪最后5个添加的图层，并添加第6个将删除第一个（最近最少添加）层。

var addedlayers = [];
function toggleLayer(i) {
    if (layer.getMap() === null) {
        addedlayers.push(i);
        if(addedlayers.length > 5) {
            var ejected = addedlayers.shift();
            layers[ejected].setMap(null);
            document.getElementById("layer" + ejected).checked = false;
        }
        layers[i].setMap(map);
    } else {
        layers[i].setMap(null);
        addedlayers.splice(addedlayers.indexOf(i)) //remove from addedlayers
    }
}

打开和关闭谷歌地图图层

2 个答案: