google-maps-api-3 - 使用复选框在 Google map v3 中切换多个图像叠加

Question

请给我一个建议。

我正在尝试创建具有多个图像叠加层的 map 。我想通过选中复选框来显示/隐藏每个叠加层。我用过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 />

请不要因为我糟糕的英语而发火。感谢您的时间。

Answer 1

问题是这样的:

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

当您单击复选框时，复选框的 checked 属性不会改变。

但是 checked 属性将会使用这个:

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