多个 GroundOverlays 的复选框切换
[英]Checkbox Toggle for Multiple GroundOverlays
问题描述
What am I missing here?
我在这里缺少什么？ I have been staring at this thing for almost 3 days now, and cannot figure out what I am doing wrong.我已经盯着这个东西将近 3 天了，无法弄清楚我做错了什么。 I have tried countless examples from various parts of the web, and the documentation isnt making much sense - but then again, letters are starting to run together.我已经尝试了来自网络各个部分的无数示例，并且文档没有多大意义 - 但话又说回来，信件开始一起运行。 Any pointers would be helpful!任何指针都会有所帮助！
The below is what I amy trying to get to work.以下是我试图开始工作的内容。 I have two groundoverlay images, with two checkboxes.我有两个地面覆盖图像，有两个复选框。 What I would like to have happen is if the box is checked, the overlay shows.我希望发生的是，如果选中该框，则会显示叠加层。 If the box is unchecked, the overlay goes away.如果未选中该框，则覆盖消失。 Simple right?简单吧？
<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>
The one below works just fine - but it's only one layer.下面的那个工作得很好 - 但它只是一层。 I'm not sure what I am missing, but I'm sure is something simple as I have little experience with JS and mapping in this fashion.我不确定我错过了什么，但我确定这很简单，因为我对 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>
2 个解决方案
解决方案1
0 2017-01-19 10:11:39
You need to pass a reference of checkbox to showcov() like this您需要像这样将复选框的引用传递给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>
But there is one problem, setMap(null) not only removes the groundOverlay but also destroys it so you cannot add them again using setMap() that's why when you un-mark and then re-mark again overlay won't appear.但是有一个问题， setMap(null)不仅删除了 groundOverlay 还会破坏它，因此您无法使用setMap()再次添加它们，这就是为什么当您取消标记然后再次重新标记时，叠加层不会出现。 To make it work you need to again create a new overlay object and set it on the map using setMap(map)要使其工作，您需要再次创建一个新的叠加对象并使用setMap(map)将其设置在地图setMap(map)
I think a better way would be not to remove but simple hide it using setOpacity() .That way you don't need to re-create overlays我认为更好的方法不是删除而是简单地使用setOpacity()隐藏它。这样你就不需要重新创建叠加层
function showcov(m,v){
if(v.checked) {
//m.setMap(map);
m.setOpacity(1);
else {
//m.setMap(null);
m.setOpacity(0);
}
}
On android you may use much easier setVisible(true) and setVisible(false) but unfortunately those functions are not available for the web version在 android 上，您可以使用更简单的setVisible(true)和setVisible(false)但不幸的是，这些功能不适用于网络版本
解决方案2
0 已采纳 2017-01-19 11:01:37
You have two issues:你有两个问题：
-
Uncaught TypeError: Cannot read property 'checked' of undefined.Uncaught TypeError: Cannot read property 'checked' of undefined。 you need to pass a reference to the checkbox into the function (thisworks or remove the declaration of the javascript variable so the automatically created reference to the HTML element can be used, as you did in your "working" example).您需要将对该复选框的引用传递到函数中（ this可以工作或删除 javascript 变量的声明，以便可以使用自动创建的对 HTML 元素的引用，就像您在“工作”示例中所做的那样）。
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
- Your
mapvariable (at least the version that is initialized) is local to theinitializefunction, remove thevarbefore it to initialize the global version (which is the scope in which HTML click listeners run), the same as you do in your "working" version of the code.您的map变量（至少是初始化的版本）是initialize函数的本地变量，删除它之前的var以初始化全局版本（这是 HTML 单击侦听器运行的范围），与您在“工作”版本的代码。
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概念证明小提琴
code snippet:代码片段：
html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.