Question

我在这里缺少什么？我现在已经盯着这件事差不多3天了，也无法弄清楚我做错了什么。我已经尝试了网络各个部分的无数例子，而且文档没有多大意义 - 但话说再一次，字母开始一起运行。任何指针都会有所帮助！

以下是我试图开始工作的内容。我有两个地面覆盖图像，有两个复选框。我希望发生的是如果选中此框，则叠加显示。如果未选中此框，则叠加层将消失。简单吧？

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

下面的一个工作正常 - 但它只是一层。我不确定我缺少什么，但我确信这很简单，因为我对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>

Answer 1

您需要将复选框的引用传递给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>

但是有一个问题，setMap(null)不仅删除了groundOverlay而且还销毁它，因此您无法使用setMap()再次添加它们，这就是为什么当您取消标记然后重新标记重叠时赢了不会出现。要使其工作，您需要再次创建一个新的叠加层对象，并使用setMap(map)

在地图上设置它

我认为更好的方法是不删除，只需使用setOpacity()隐藏它。这样您就不需要重新创建叠加层

function showcov(m,v){
    if(v.checked) {
        //m.setMap(map); 
        m.setOpacity(1);
    else {
        //m.setMap(null); 
        m.setOpacity(0);
     }
}

在Android上，您可以更轻松地使用setVisible(true)和setVisible(false)，但遗憾的是，这些功能不适用于网络版

Answer 2

您有两个问题：

Uncaught TypeError: Cannot read property 'checked' of undefined。你需要将复选框的引用传递给函数（this工作或删除javascript变量的声明，以便可以使用自动创建的HTML元素引用，就像你在＆＃34;工作＆＃34;示例）。

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

您的map变量（至少是初始化的版本）是initialize函数的本地变量，在它之前删除var以初始化全局版本（这是哪些HTML点击监听器运行），就像你在＆＃34;工作＆＃34;代码的版本。

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
    });

proof of concept fiddle

代码段

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="controls">
  <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
</div>
<div id="map_canvas"></div>
<script language="javascript" type="text/javascript">
  var map;
  var rmap1, mk1;
  var rmap2, mk2;

  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
      });
      //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("https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", 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("https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", 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);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

＆＃13;

复选框切换多个GroundOverlays

2 个答案: