Fatal编程技术网
  • javascript/
  • Javascript 多个地面覆盖的复选框切换

Javascript 多个地面覆盖的复选框切换

javascript google-maps-api-3 checkbox

Javascript 多个地面覆盖的复选框切换,javascript,google-maps-api-3,checkbox,Javascript,Google Maps Api 3,Checkbox,我错过了什么？我已经盯着这件事看了将近三天了，我不知道我做错了什么。我已经尝试了无数来自网络各个部分的例子，文档也没有多大意义——但话说回来，信件开始一起运行。任何指点都会有帮助 下面是我想要开始工作的地方。我有两张地面覆盖图，带有两个复选框。我希望发生的是，如果选中该框，则覆盖显示。如果未选中该框，则覆盖将消失。简单对吧 <body onload="initialize()"> <div id="controls"> <input name="ckc1" oncl

我错过了什么？我已经盯着这件事看了将近三天了，我不知道我做错了什么。我已经尝试了无数来自网络各个部分的例子，文档也没有多大意义——但话说回来，信件开始一起运行。任何指点都会有帮助

下面是我想要开始工作的地方。我有两张地面覆盖图，带有两个复选框。我希望发生的是，如果选中该框，则覆盖显示。如果未选中该框，则覆盖将消失。简单对吧

<body onload="initialize()">
<div id="controls">
<input name="ckc1" onclick="showcov(rmap1,ckc1);" type="checkbox" checked="true">White Tanks</input>
<input name="ckc2" onclick="showcov(rmap2,ckc2);" type="checkbox" checked="true">Scottsdale</input>
</div>
<div id="map_canvas"></div>
<script language="javascript" type="text/javascript">
var map;
var rmap1,mk1,ckc1;
var rmap2,mk2,ckc2;
function initialize() {
var coord = new google.maps.LatLng( 33.5783309936523,-112.573112487793);
var map = new google.maps.Map(document.getElementById('map_canvas'), {
          mapTypeId: google.maps.MapTypeId.TERRAIN,
      center: {lat: 33.5783309936523, lng:-112.573112487793},
      zoom: 8
    });
//White Tanks   
var boundaries1 = new google.maps.LatLngBounds(
    new google.maps.LatLng( 32.22935,-114.1923),
    new google.maps.LatLng( 34.92731,-110.9539));
rmap1 =new google.maps.GroundOverlay("RM77B714BB9248_1.png", boundaries1);  
rmap1.setMap(map);
mk1 =new google.maps.Marker({position:new google.maps.LatLng( 33.57832983,-112.57310897),map:map,title:'462.550 Mhz at 50 Watts',draggable:false,zIndex:1});
//Scottsdale
var boundaries2 = new google.maps.LatLngBounds(
    new google.maps.LatLng( 32.36672,-113.4623), 
    new google.maps.LatLng( 35.06469,-110.2188));
rmap2 =new google.maps.GroundOverlay("RM77B714BB9248_4.png", boundaries2);
rmap2.setMap(map);
mk2 =new google.maps.Marker({position:new google.maps.LatLng( 33.715703,-111.840549),map:map,title:'462.600 Mhz at 20 Watts',draggable:false,zIndex:1});
}
//Checkbox Function
function showcov(m,v){if(v.checked) m.setMap(map); else m.setMap(null);}
</script>
</body>


白色坦克
斯科茨代尔
var映射；
变量rmap1、mk1、ckc1；
变量rmap2、mk2、ckc2；
函数初始化（）{
var coord=new google.maps.LatLng（33.5783309936523，-112.573112487793）；
var map=new google.maps.map（document.getElementById（'map_canvas'）{
mapTypeId:google.maps.mapTypeId.TERRAIN，
中心：{lat:33.5783309936523，lng:-112.573112487793}，
缩放：8
});
//白色坦克
var boundaries1=新的google.maps.LatLngBounds(
新google.maps.LatLng（32.22935，-114.1923），
新的google.maps.LatLng（34.92731，-110.9539））；
rmap1=新的google.maps.GroundOverlay（“RM77B714BB9248_1.png”，boundaries1）；
rmap1.setMap（map）；
mk1=new google.maps.Marker（{位置：new google.maps.LatLng（33.57832983，-112.57310897），map:map，标题：“50瓦462.550兆赫”，可拖动：false，zIndex:1}）；
//斯科茨代尔
var boundaries2=新的google.maps.LatLngBounds(
新的google.maps.LatLng（32.36672，-113.4623），
新的google.maps.LatLng（35.06469，-110.2188））；
rmap2=新的google.maps.GroundOverlay（“RM77B714BB9248_4.png”，boundaries2）；
rmap2.setMap（map）；
mk2=new google.maps.Marker（{位置：new google.maps.LatLng（33.715703，-111.840549），map:map，标题：“462.600兆赫，20瓦”，可拖动：false，zIndex:1}）；
}
//复选框函数
函数showcov（m，v）{if（v.checked）m.setMap（map）；else m.setMap（null）；}
下面的那一层很好用，但只有一层。我不确定我遗漏了什么，但我确信这很简单，因为我对JS和这种方式的映射几乎没有经验

<script type="text/javascript">
var map;
var rmap1,mk1;
function initialize() {
var coord = new google.maps.LatLng( 33.7157020568848,-111.840545654297);
var myOptions = {zoom:  7,center: coord, mapTypeId: 
google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions );
var boundaries1 = new google.maps.LatLngBounds(new google.maps.LatLng( 32.36672,-113.4623), new google.maps.LatLng( 35.06469,-110.2188));
rmap1 =new google.maps.GroundOverlay("RM77B714BB9248_4.png", boundaries1);
rmap1.setMap(map);
mk1 =new google.maps.Marker({position:new google.maps.LatLng( 33.715703,-111.840549),map:map,draggable:false,zIndex:1});
rmap1.setMap(map);
 }
function showcov(m,v){if(v.checked) m.setMap(map); else m.setMap(null);}
</script></head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%;height:80%"></div>
<div style="width:100%;height:10%">
<table width="100%"><tr><th colspan="2">Scottsdale 450 MHz**</th></tr><tr>    <td bgcolor="#E0E0E0" colspan="2"><form name="form2">
<input type="checkbox" name="ckc1" checked="true"     onclick="showcov(rmap1,ckc1);">Scottsdale 450 MHz**</input>
<input type="checkbox" name="ckm1" checked="true"     onclick="showcov(mk1,ckm1);">Scottsdale</input>
</form></td></tr></table></div></body>


var映射；
var-rmap1，mk1；
函数初始化（）{
var coord=new google.maps.LatLng（33.7157020568848，-111.84054297）；
var myOptions={zoom:7，center:coord，mapTypeId:
google.maps.MapTypeId.ROADMAP}；
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var boundaries1=new google.maps.LatLngBounds（new google.maps.LatLng（32.36672，-113.4623），new google.maps.LatLng（35.06469，-110.2188））；
rmap1=新的google.maps.GroundOverlay（“RM77B714BB9248_4.png”，boundaries1）；
rmap1.setMap（map）；
mk1=new google.maps.Marker（{位置：new google.maps.LatLng（33.715703，-111.840549），map:map，draggable:false，zIndex:1}）；
rmap1.setMap（map）；
}
函数showcov（m，v）{if（v.checked）m.setMap（map）；else m.setMap（null）；}
斯科茨代尔450兆赫**
斯科茨代尔450兆赫**
斯科茨代尔
您需要像这样将复选框的引用传递给
showcov（）

<input name="ckc1" onclick="showcov(rmap1,this);" type="checkbox" checked="true">White Tanks</input>
<input name="ckc2" onclick="showcov(rmap2,this);" type="checkbox" checked="true">Scottsdale</input>
在android上，您可能会使用更简单的
setVisible（true）
和
setVisible（false）
，但不幸的是，这些功能不适用于web版本

您有两个问题：

  • 未捕获类型错误：无法读取未定义的属性“已检查”
    。您需要将对复选框的引用传递到函数中（
    this
    工作或删除javascript变量的声明，以便可以使用自动创建的对HTML元素的引用，就像您在“工作”示例中所做的那样）

    • 代码片段：

    html，
身体，
#地图画布{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}
    
白色坦克
斯科茨代尔
var映射；
var-rmap1，mk1；
var-rmap2，mk2；
函数初始化（）{
var coord=new google.maps.LatLng（33.5783309936523，-112.573112487793）；
map=new google.maps.map（document.getElementById（'map_canvas'）{
mapTypeId:google.maps.mapTypeId.TERRAIN，
中心：{
纬度：33.5783309936523，
液化天然气：-112.573112487793
},
缩放：8
});
//白色坦克
var boundaries1=新的google.maps.LatLngBounds(
新google.maps.LatLng（32.22935，-114.1923），
新的google.maps.LatLng（34.92731，-110.9539））；
rmap1=新的google.maps.GroundOverlay（“https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg“，边界1）；
rmap1.setMap（map）；
mk1=新的google.maps.Marker({
位置：新google.maps.LatLng（33.57832983，-112.57310897），
地图：地图，
标题：“50瓦时462.550兆赫”，
可拖动：错误，
zIndex:1
});
//斯科茨代尔
var boundaries2=新的google.maps.LatLngBounds(
新的google.maps.LatLng（32.36672，-113.4623），
新的google.maps.LatLng（35.06469，-110.2188））；
rmap2=新的google.maps.GroundOverlay（“https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg“，边界2）；
rmap2.setMap（map）；
mk2=新的google.maps.Marker({
位置：新google.maps.LatLng（33.715703，-111.840549），
地图：地图，
标题：“20瓦时462.600兆赫”，
可拖动：错误，
zIndex:1
});
}
//复选框函数
函数showcov（m，v）{
如果（v.checked）m.setMap（map）；
else m.setMap（空）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
    我考虑过这样做，但我想这张地图不会出现在移动设备上，好吧，但是你有一些很好的建议，这些建议在我遇到的另一个问题上帮助了我，这与另一个项目有关-非常感谢！这正是我错过的，谢谢，我很感激！我日以继夜地在这三个项目上工作，每天20多个小时。我总是忘记把地图设为全球地图。 
    function showcov(m,v){
    if(v.checked) {
        //m.setMap(map); 
        m.setOpacity(1);
    else {
        //m.setMap(null); 
        m.setOpacity(0);
     }
}

    var rmap1,mk1; // ckc1;
var rmap2,mk2; // ckc2;

<input id="ckc1" onclick="showcov(rmap1,ckc1);" type="checkbox" checked="true" />White Tanks
<input id="ckc2" onclick="showcov(rmap2,ckc2);" type="checkbox" checked="true" />Scottsdale

    var map;
function initialize() {
var coord = new google.maps.LatLng( 33.5783309936523,-112.573112487793);
map = new google.maps.Map(document.getElementById('map_canvas'), {
          mapTypeId: google.maps.MapTypeId.TERRAIN,
      center: {lat: 33.5783309936523, lng:-112.573112487793},
      zoom: 8
    });