0

我正在构建一个自定义谷歌地图（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 插件在选项卡中设置了菜单样式。

到目前为止，我添加的图层可以打开和关闭，但我遇到的问题是，当页面加载时，有时会显示一个图层，而其他时候它会被隐藏，并且需要在它之前勾选该复选框几次会出现。

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

4

2 回答 2

1

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

我正在用你的代码发现更多问题来更新它。

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

for (var i = 1; i < layers.length; i++) {
    if (typeof layers[i] != 'undefined') {
        layers[i].setMap(map);
    }
}
于 2013-03-25T21:24:52.063 回答
0

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

如果您不希望您的图层在加载时显示，请不要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
    }
}
于 2013-03-25T22:49:55.527 回答