Google maps api 3 使用复选框在Google Maps v3中切换多个图像覆盖_Google Maps Api 3_Checkbox_Overlay_Jquery

Google maps api 3 使用复选框在Google Maps v3中切换多个图像覆盖

google-maps-api-3 checkbox jquery

Google maps api 3 使用复选框在Google Maps v3中切换多个图像覆盖,google-maps-api-3,checkbox,overlay,jquery,Google Maps Api 3,Checkbox,Overlay,Jquery,请给我一个建议我正在尝试创建一个具有多个图像覆盖的地图。我想通过选中复选框来显示/隐藏每个覆盖。我将其用作参考，但由于某些原因，它对我来说无法正常工作：无论是否选中，都不会显示任何层。请告诉我我的代码有什么问题这是脚本部分 <script> var server = 'https://gbank.gsj.jp/seamless/tilemap/'; var geolMapType = 'basic'; var layer = 'glfn'; var opacity = 0.7;

请给我一个建议

我正在尝试创建一个具有多个图像覆盖的地图。我想通过选中复选框来显示/隐藏每个覆盖。我将其用作参考，但由于某些原因，它对我来说无法正常工作：无论是否选中，都不会显示任何层。请告诉我我的代码有什么问题

这是脚本部分

<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>


var服务器https://gbank.gsj.jp/seamless/tilemap/';
var geolMapType='basic'；
变量层='glfn'；
var不透明度=0.7；
var映射；
函数初始化（）{
变量映射选项={
缩放：7，
中心：新google.maps.LatLng（34.59135.67），
mapTypeId:google.maps.mapTypeId.ROADMAP，
minZoom:5，
最大缩放：13
};
map=new google.maps.map（document.getElementById（'map_canvas'），mapOptions）；
覆盖贴图=[
{//sedTer
getTileUrl:函数（coord，z）{
返回服务器+geolMapType+'/'+layer+'/'+z+'/'+coord.y+'/'+coord.x+'.png'+'？选择=gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
},
tileSize:new google.maps.Size（256256），
isPng：是的
}，{//sedMar
getTileUrl:函数（coord，z）{
返回服务器+geolMapType+'/'+layer+'/'+z+'/'+coord.y+'/'+coord.x+'.png'+'？选择=uuuuuuuuuuuuuuuuuuuuuaaaaaaaaaaaaaaaaaaaa wbaieaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
},
tileSize:new google.maps.Size（256256），
isPng：是的
}，{//accSed
getTileUrl:函数（coord，z）{
返回服务器+geolMapType++'/'+layer++'/'+z++'/'+coord.y++'/'+coord.x++'.png'+'？选择=gAAAA uuuuuuuuuuuu4aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
},
tileSize:new google.maps.Size（256256），
isPng：是的
}，{//accMaf
getTileUrl:函数（coord，z）{
返回服务器+geolMapType+'/'+layer+'/'+z+'/'+coord.y+'/'+coord.x+'.png'+''？选择=gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
},
tileSize:new google.maps.Size（256256），
isPng：是的
}，{//volTep
getTileUrl:函数（coord，z）{
返回服务器+geolMapType+'/'+layer+'/'+z+'/'+coord.y+'/'+coord.x+'.png'+''？选择=gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
},
tileSize:new google.maps.Size（256256），
isPng：是的
}，{//volDeb
getTileUrl:函数（coord，z）{
返回服务器+geolMapType+'/'+layer+'/'+z+'/'+coord.y+'/'+coord.x+'.png'+''？选择=gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
},
tileSize:new google.maps.Size（256256），
isPng：是的
}，{//volInt
getTileUrl:函数（coord，z）{
返回服务器+geolMapType+'/'+layer+'/'+z+'/'+coord.y+'/'+coord.x+'.png'+'？选择=gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
},
tileSize:new google.maps.Size（256256），
isPng：是的
}，{//pluFel
getTileUrl:函数（coord，z）{
返回服务器+geolMapType+'/'+layer+'/'+z+'/'+coord.y+'/'+coord.x+'.png'+'？选择=gaaaaaaaaaaaaaaaaap_aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
},
tileSize:new google.maps.Size（256256），
isPng：是的
}，{//pluMaf
getTileUrl:函数（coord，z）{
返回服务器+geolMapType++'/'+layer++'/'+z++'/'+coord.y++'/'+coord.x++'.png'+'？选择=gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
},
tileSize:new google.maps.Size（256256），
isPng：是的
}，{//pluMig
getTileUrl:函数（coord，z）{
返回服务器+geolMapType+'/'+layer+'/'+z+'/'+coord.y+'/'+coord.x+'.png'+''？选择=gaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
},
tileSize:new google.maps.Size（256256），
isPng：是的
}，{//全部
getTileUrl:函数（coord，z）{
返回服务器+geolMapType+'/'+layer+'/'+z+'/'+coord.y+'/'+coord.x+'.png'；
},
tileSize:new google.maps.Size（256256），
是的，
不透明度：0.2
}
];
$（'.layer'）。单击（函数（）{
var layerID=parseInt（$（this.attr（'id'））；
if（$（this.attr（'checked'））{
var overlayMap=new google.maps.ImageMapType（overlayMap[layerID]）；
map.overlayMapTypes.setAt（layerID，overlayMap）；
}
否则{
if（map.overlayMapTypes.getLength（）>0）{
setAt（layerID，null）；
}
}
});
对于（i=0；i



这是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 />

沉积岩、阶地

沉积岩，非海相及；海事

增生杂岩，主要为沉积岩

镁铁质增生杂岩

火山岩，火山灰

火山岩、碎屑

侵入性火山岩

深成岩，长英质

深成岩，镁铁质

深成岩，混合岩

全部


请不要因为我的英语不好而生气。谢谢你抽出时间
 问题在于：
if ($(this).attr('checked'))

单击复选框时，复选框的checked
-属性不会更改
但是选中的属性将使用以下内容：
if ($(this).prop('checked'))