0

カスタム 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 Plugin を使用してタブ内のメニューのスタイルを設定したことがわかります。

これまでに追加したレイヤーはオンとオフを切り替えても問題ありませんが、問題は、ページが読み込まれると、レイヤーが表示される場合と非表示になる場合があり、その前にチェックボックスを数回オンにする必要があることです。現れる。

チェックボックスをオフにしてレイヤーを非表示にしてマップページが最初に読み込まれるように、これを修正する解決策を見つけようとしています。次に、チェックボックスにチェックを入れると、レイヤーがオンになり、チェックボックスがオフになると再びオフになりますか?

4

2 に答える 2

1

myOptions 変数を設定した後、セミコロンがありません。

私はあなたのコードで見つけたより多くの問題でこれを更新しています。

マップをレイヤーに設定する for ループが正しくありません。レイヤー配列の長さは 301 ですが、それはインデックス 300 に項目を手動で設定したためです。値を含む配列インデックス間にギャップがある場合、レイヤー配列をやみくもに反復処理することはできません。本当に 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 に答える