使用複選框在Google Maps v3中切換多個圖像疊加層

我正在嘗試創建具有多個圖像疊加層的地圖。我想通過選中複選框來顯示/隱藏每個疊加層。我使用GeoJason's code作爲參考，但出於某種原因，它無法正常工作：無論是選中還是未選中，都不會顯示圖層。請告訴我我的代碼有什麼問題。

這是腳本部分。

<script> 
var server = 'https://gbank.gsj.jp/seamless/tilemap/'; 
var geolMapType = 'basic'; 
var layer = 'glfn'; 
var opacity = 0.7; 
var map; 

function initialize() { 
var mapOptions = { 
    zoom: 7, 
    center: new google.maps.LatLng(34.59, 135.67), 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    minZoom: 5, 
    maxZoom: 13 
}; 

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

overlayMaps = [ 
    { //sedTer 
    getTileUrl: function (coord, z) { 
    return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=gAAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'; 
    }, 
    tileSize: new google.maps.Size(256, 256), 
    isPng: true 
    }, { //sedMar 
    getTileUrl: function (coord, z) { 
    return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=_____AAAAAAAAAAAAAAAAAAAAAAwBAIEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'; 
    }, 
    tileSize: new google.maps.Size(256, 256), 
    isPng: true 
    }, { //accSed 
    getTileUrl: function (coord, z) { 
    return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=gAAAA______4AAAAAAAAAAAAAAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'; 
    }, 
    tileSize: new google.maps.Size(256, 256), 
    isPng: true 
    }, { //accMaf 
    getTileUrl: function (coord, z) { 
    return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=gAAAAAAAAAAH-AAAAAAAAAAAAAAAgAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'; 
    }, 
    tileSize: new google.maps.Size(256, 256), 
    isPng: true 
    }, { //volTep 
    getTileUrl: function (coord, z) { 
    return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=gAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'; 
    }, 
    tileSize: new google.maps.Size(256, 256), 
    isPng: true 
    }, { //volDeb 
    getTileUrl: function (coord, z) { 
    return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=gAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'; 
    }, 
    tileSize: new google.maps.Size(256, 256), 
    isPng: true 
    }, { //volInt 
    getTileUrl: function (coord, z) { 
    return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=gAAAAAAAAAAAAeAAAAAAAAAAAAAAAehwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'; 
    }, 
    tileSize: new google.maps.Size(256, 256), 
    isPng: true 
    }, { //pluFel 
    getTileUrl: function (coord, z) { 
    return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=gAAAAAAAAAAAAAAAAAAAP_-AAAAAAgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'; 
    }, 
    tileSize: new google.maps.Size(256, 256), 
    isPng: true 
    }, { //pluMaf 
    getTileUrl: function (coord, z) { 
    return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=gAAAAAAAAAAABAAAAAAAAAD_-AAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'; 
    }, 
    tileSize: new google.maps.Size(256, 256), 
    isPng: true 
    }, { //pluMig 
    getTileUrl: function (coord, z) { 
    return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png' + '?select=gAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'; 
    }, 
    tileSize: new google.maps.Size(256, 256), 
    isPng: true 
    }, { //all 
    getTileUrl: function (coord, z) { 
    return server + geolMapType + '/' + layer + '/' + z + '/' + coord.y + '/' + coord.x + '.png'; 
    }, 
    tileSize: new google.maps.Size(256, 256), 
    isPng: true, 
    opacity: 0.2 
    } 
]; 

$('.layer').click(function(){ 
var layerID = parseInt($(this).attr('id')); 
if ($(this).attr('checked')){ 
    var overlayMap = new google.maps.ImageMapType(overlayMaps[layerID]); 
    map.overlayMapTypes.setAt(layerID, overlayMap); 
    } 
else { 
    if (map.overlayMapTypes.getLength() > 0){ 
    map.overlayMapTypes.setAt(layerID, null); 
    } 
} 
}); 

for (i = 0; i < overlayMaps.length; i++){ 
map.overlayMapTypes.push(null); 
} 

} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script>

這是HTML代碼。

<input type="checkbox" id="00" class="layer" name="sedTer" /><label for="00">Sedimentary Rocks, Terrace</label><br /> 
<input type="checkbox" id="01" class="layer" name="sedMar" /><label for="01">Sedimentary Rocks, Non-marine&amp;Marine</label><br /> 
<input type="checkbox" id="02" class="layer" name="accSed" /><label for="02">Accretionary Complexes, Mainly sedimentary rocks</label><br /> 
<input type="checkbox" id="03" class="layer" name="accMaf" /><label for="03">Accretionary Complexes, Mafic</label><br /> 
<input type="checkbox" id="04" class="layer" name="volTep" /><label for="04">Volcanic Rocks, Tephra</label><br /> 
<input type="checkbox" id="05" class="layer" name="volDeb" /><label for="05">Volcanic Rocks, Debris</label><br /> 
<input type="checkbox" id="06" class="layer" name="volInt" /><label for="06">Volcanic Rocks, Intrusive</label><br /> 
<input type="checkbox" id="07" class="layer" name="pluFel" /><label for="07">Plutonic Rocks, Felsic</label><br /> 
<input type="checkbox" id="08" class="layer" name="pluMaf" /><label for="08">Plutonic Rocks, Mafic</label><br /> 
<input type="checkbox" id="09" class="layer" name="pluMig" /><label for="09">Plutonic Rocks, Migmatitic</label><br /> 
<input type="checkbox" id="10" class="layer" name="all" /><label for="10">All</label><br />

請不要說我的壞英語的火焰。感謝您的時間。

來源

2013-07-21 user2601414

的問題是這樣的：

if ($(this).attr('checked'))

當你點擊一個複選框

，該checked -attribute複選框不會改變。

但checked - 屬性會，用這個來代替：

if ($(this).prop('checked'))

來源

2013-07-21 07:11:05

使用複選框在Google Maps v3中切換多個圖像疊加層

回答

相關問題