无法在网页上显示和隐藏雷达图层
我不能，为了我的生活，弄清楚如何切换这个谷歌地图雷达层，以显示和隐藏每当我点击相关的按钮。 任何帮助，将不胜感激！
基本上，每当我点击“雷达”按钮时，我希望此function可以打开和关闭。
使用Javascript：
function animateRadar(overlayMapTypes) { index = map.overlayMapTypes.getLength() - 1; window.setInterval(function(){ map.overlayMapTypes.getAt(index).setOpacity(0.00); index--; if(index < 0){ index = map.overlayMapTypes.getLength() - 1; } map.overlayMapTypes.getAt(index).setOpacity(0.60); }, 400); }
function wx(){ animateRadar(); } $("#wxxx").click(function(){ $("#weather").toggleClass("active"); wx(); });
HTML：
这是jsFiddle
我对jsfiddle很新，所以我不太清楚如何正确显示图像。 以下是该网站的图片： http ： //imgur.com/6tpVuDA
所以是的..答案实际上很容易解决，而无需在jsfiddle上查看示例代码的输出
window.setInterval(返回一个句柄，也称为timerId。
要清除间隔计时器，你使用window.clearInterval(timerId) ..来隐藏雷达，你迭代overlayMapTypes并将opacity设置为0
var timerId = -1; function animateRadar(overlayMapTypes) { index = map.overlayMapTypes.getLength() - 1; if (timerId >= 0) { //stop timer window.clearInterval(timerId); timerId = -1; //hide overlayMayTypes for (var i = 0, max = map.overlayMapTypes.length; i < max; i++) { map.overlayMapTypes.getAt(i).setOpacity(0.00); } return; } timerId = window.setInterval(function () { map.overlayMapTypes.getAt(index).setOpacity(0.00); index--; if (index < 0) { index = map.overlayMapTypes.getLength() - 1; } map.overlayMapTypes.getAt(index).setOpacity(0.60); }, 400); }
为了完整......
我将把代码示例带到这个答案中（希望我可以为此隐藏样式，但这不在stacksnippetfunction中......）
var mapCreated = false; var mapPoints = new Array(); var names = new Array(); var times = new Array(); var colors = new Array(); initialCenterFocused = false; var map; var imageArray = []; var kmzLayer; var bounds; var mapOptions; var markers = []; var lines = []; var fartherTimeThresholdMillis = 36000000; var nearerTimeThresholdMillis = 0; var now = new Date(); var endTimeCutOff = now.getTime() - fartherTimeThresholdMillis; var startTimeCutOff = now.getTime() - nearerTimeThresholdMillis; var timer; var playTimer; var isPlaying = false; var radar = false; var index; function eraseAllMarkersAndLines() { for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } for (var i = 0; i < lines.length; i++) { lines[i].setMap(null); } markers = []; lines = []; } function fetchNewest() { console.log("fetching newest"); nearerTimeThresholdMillis = parseInt(jQuery("#timeslider").slider("values", 0)) * 60000; fartherTimeThresholdMillis = parseInt(jQuery("#timeslider").slider("values", 1)) * 60000; now = new Date(); endTimeCutOff = now.getTime() - fartherTimeThresholdMillis; startTimeCutOff = now.getTime() - nearerTimeThresholdMillis; mapPoints.push(new google.maps.LatLng(33.730362, -85.792725)); names.push("Alpha"); times.push("1425059747829"); colors.push("Red"); mapPoints.push(new google.maps.LatLng(33.73041, -85.79264)); names.push("Delta"); times.push("1425059172108"); colors.push("Blue"); mapPoints.push(new google.maps.LatLng(33.72476, -85.788185)); names.push("Golf"); times.push("1425050587395"); colors.push("Green"); console.log(names); /** jQuery.ajax({ type: "POST", url: "fetchNewest14.jsp", data: "endTimeCutOff=" + endTimeCutOff + "&startTimeCutOff=" + startTimeCutOff, dataType: "script", scriptCharset: "utf-8", success: function(data){ //console.log(data); }, error: function(xhr, status, error) { //console.log("ERROR, DAVE" + error); } }) .done(function() { if (!mapCreated) { mapCreated = true; createMap(); } updateMap(); //console.log(mapPoints); }); clearTimeout(timer); timer = setTimeout('fetchNewest()', 10000); **/ } // end of fetchNewest function createMap() { mapOptions = { panControl: false, zoomControl: false, zoom: 10, streetViewControl: false, center: mapPoints[0] //{ lat: 33.8137100, lng: 85.7613500} }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //function drawWeather(){ //Load Images and add them to imageArray tileNEX = new google.maps.ImageMapType({ getTileUrl: function (tile, zoom) { return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime(); }, tileSize: new google.maps.Size(256, 256), opacity: 0.00, name: 'NEXRAD', isPng: true }); map.overlayMapTypes.push(tileNEX); tileNEX5 = new google.maps.ImageMapType({ getTileUrl: function (tile, zoom) { return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m05m/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime(); }, tileSize: new google.maps.Size(256, 256), opacity: 0.00, name: 'NEXRAD5', isPng: true }); map.overlayMapTypes.push(tileNEX5); tileNEX10 = new google.maps.ImageMapType({ getTileUrl: function (tile, zoom) { return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m10m/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime(); }, tileSize: new google.maps.Size(256, 256), opacity: 0.00, name: 'NEXRAD10', isPng: true, optimized: false }); map.overlayMapTypes.push(tileNEX10); tileNEX15 = new google.maps.ImageMapType({ getTileUrl: function (tile, zoom) { return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m15m/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime(); }, tileSize: new google.maps.Size(256, 256), opacity: 0.00, name: 'NEXRAD15', isPng: true }); map.overlayMapTypes.push(tileNEX15); tileNEX20 = new google.maps.ImageMapType({ getTileUrl: function (tile, zoom) { return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m20m/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime(); }, tileSize: new google.maps.Size(256, 256), opacity: 0.00, name: 'NEXRAD20', isPng: true }); map.overlayMapTypes.push(tileNEX20); tileNEX25 = new google.maps.ImageMapType({ getTileUrl: function (tile, zoom) { return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m25m/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime(); }, tileSize: new google.maps.Size(256, 256), opacity: 0.00, name: 'NEXRAD25', isPng: true }); map.overlayMapTypes.push(tileNEX25); tileNEX30 = new google.maps.ImageMapType({ getTileUrl: function (tile, zoom) { return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913-m30m/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime(); }, tileSize: new google.maps.Size(256, 256), opacity: 0.00, name: 'NEXRAD30', isPng: true }); map.overlayMapTypes.push(tileNEX30); } var timerId = -1; function animateRadar(overlayMapTypes) { index = map.overlayMapTypes.getLength() - 1; if (timerId >= 0) { window.clearInterval(timerId); timerId = -1; for (var i = 0, max = map.overlayMapTypes.length; i < max; i++) { map.overlayMapTypes.getAt(i).setOpacity(0.00); } return; } timerId = window.setInterval(function () { map.overlayMapTypes.getAt(index).setOpacity(0.00); index--; if (index < 0) { index = map.overlayMapTypes.getLength() - 1; } map.overlayMapTypes.getAt(index).setOpacity(0.60); }, 400); } //} function createMarkers() { } function updateMap() { eraseAllMarkersAndLines(); //console.log("updating map"); var markerOpacity = 1.0; var zIndex = 10; for (var i = 0; i < mapPoints.length; i++) { if (i > 0 && names[i] === names[i - 1]) { // this point should be connected to the previous point, so draw a line if (markerOpacity > 0) { // only add it if it's not totally transparent var lineCoords = [mapPoints[i - 1], mapPoints[i]]; var lineToDraw = new google.maps.Polyline({ path: lineCoords, map: map, strokeColor: '#000000', strokeOpacity: markerOpacity, strokeWeight: 2 }); lines.push(lineToDraw); } // also, fade the marker's opacity a bit, and set it back in layers markerOpacity = Math.max(markerOpacity - .1, 0); zIndex -= 1; } else { // it's a new name markerOpacity = 1.0; zIndex = 10; } if (markerOpacity > 0) { // add the marker var marker = new MarkerWithLabel({ position: mapPoints[i], map: map, labelContent: names[i], labelAnchor: new google.maps.Point(50, 11), labelClass: "labels", labelStyle: { opacity: markerOpacity }, zIndex: zIndex, labelZIndex: zIndex, icon: { path: google.maps.SymbolPath.CIRCLE, strokeColor: "black", fillColor: colors[i], fillOpacity: markerOpacity, strokeOpacity: markerOpacity, strokeWeight: 3, scale: 15 }, InfoWindowShown: true, title: String(zIndex) }); // set label text color based on squad color var lightColors = new Array("yellow", "pink"); if (lightColors.indexOf(colors[i].toLowerCase()) != -1) { // set labels to black text marker.labelStyle.color = "black"; } else { marker.labelStyle.color = "white"; } // shorten squad names var squadNames = { alpha: "A", bravo: "B", charlie: "C", delta: "D", echo: "E", foxtrot: "F", golf: "G" }; marker.labelContent = squadNames[marker.labelContent.toLowerCase()]; markers.push(marker); bounds.extend(mapPoints[i]); } // end of adding marker } if (!initialCenterFocused) { initialCenterFocused = true; map.fitBounds(bounds); } console.log(names); } // end of updateMap function moveForward() { console.log("moving forward"); jQuery("#timeslider").slider('values', 1, jQuery("#timeslider").slider("values", 1) - .5); jQuery("#amount").val(jQuery("#timeslider").slider("values", 0) + " - " + jQuery("#timeslider").slider("values", 1)); fetchNewest(); playTimer = setTimeout('moveForward()', 3000); } function setupInterface() { // set up the slider jQuery("#timeslider").slider({ range: true, min: 0, max: 600, step: 0.1, values: [0, 300], slide: function (event, ui) { jQuery("#amount").val("" + ui.values[0] + " - " + ui.values[1]); } }); jQuery("#amount").val(jQuery("#timeslider").slider("values", 0) + " - " + jQuery("#timeslider").slider("values", 1)); jQuery("#timeslider").on("slidestop", function (event, ui) { fetchNewest(); }); // set up button jQuery(function () { jQuery("#myButton").click(function (event) { if (!isPlaying) { isPlaying = true; jQuery("#myButton").prop("value", "Pause"); clearTimeout(timer); moveForward(); } else { isPlaying = false; jQuery("#myButton").prop("value", "Play"); clearTimeout(playTimer); } }); }); } // end of setupInterface function initialize() { setupInterface(); fetchNewest(); createMap(); } google.maps.event.addDomListener(window, 'load', initialize); function wx() { animateRadar(); } $("#wxxx").click(function () { $("#weather").toggleClass("active"); wx(); }); /*Checks to see if check boxes were clicked and displays output to console*/ function checkBoxValues(form) { var values = []; var squads = form.squads; /*iterate through check boxes*/ for (var i in form.squads) { if (squads[i].checked) { values.push(squads[i].value); } } /*log values to console*/ alert("Squads: " + values.join(', ')); return values; } initialize(); //***On click open Squads****
/* Starter CSS for Flyout Menu */ #cssmenu { top: 50%; padding: 0; margin: 0; border: 0; display:block; position:relative; } #cssmenu ul, li { list-style: none; margin: 0; padding: 0; } #cssmenu ul { position: relative; z-index: 597; float: left; } #cssmenu ul li { float: left; min-height: 1px; line-height: 1em; vertical-align: middle; } #cssmenu ul li.hover, #cssmenu ul li:hover { position: relative; z-index: 599; cursor: default; } #cssmenu ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; } #cssmenu ul ul li { float: none; } #cssmenu ul li:hover > ul { visibility: visible; } #cssmenu ul ul { top: 0; left: 100%; } #cssmenu ul li { float: none; } /* Custom Stuff */ #cssmenu span, #cssmenu a { display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; } #cssmenu:after, #cssmenu ul:after { content:''; display: block; clear: both; } #cssmenu > ul > li:first-child { -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #cssmenu > ul > li:last-child { -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #cssmenu > ul > li ul ul { -moz-border-radius: 0 6px 6px 0; -webkit-border-radius: 0 6px 6px 0; border-radius: 0 6px 6px 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #cssmenu > ul > li ul ul li:first-child { -moz-border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; border-radius: 0 5px 0 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #cssmenu > ul > li ul ul li:last-child { -moz-border-radius: 0 0 5px 0; -webkit-border-radius: 0 0 5px 0; border-radius: 0 0 5px 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #cssmenu ul, #cssmenu li { width: 100%; } #cssmenu li { background: #dddddd url(data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAMAAAA8eE0hAAAAUVBMVEX////MzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzNzc3l5eXg4ODZ2dnMzMzi4uLS0tLe3t7Q0NDV1dXj4+PW1tbk5OTc3NzPz8/R0dH0Zv5RAAAAC3RSTlMAM2YekAmlPHuEAwArv7wAAAA/SURBVHheY2Dl5mdigABGKV5BNnYok4dHQpKFGcrkEefj5gAzQUBABM7kFYQyRcX4mUBMkEpOLrA2IWGwfgYAn0UDZszv8IwAAAAASUVORK5CYII=) repeat-x; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e5e5e5), color-stop(1, #dddddd)); background-image: -webkit-linear-gradient(top, #e5e5e5, #dddddd); background-image: -moz-linear-gradient(top, #e5e5e5, #dddddd); background-image: -ms-linear-gradient(top, #e5e5e5, #dddddd); background-image: -o-linear-gradient(top, #e5e5e5, #dddddd); background-image: linear-gradient(#e5e5e5, #dddddd); } #cssmenu li:hover { background: #f6f6f6; } #cssmenu a { color: #666666; line-height: 160%; padding: 11px 28px 11px 28px; width: 144px; } #cssmenu ul ul { width: 200px; border: 1px solid #dddddd; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } #cssmenu ul ul li { background: #f6f6f6; } #cssmenu ul ul li:hover { background: #dddddd; } #cssmenu ul ul li:hover a { color: #AE0001; } #cssmenu ul ul li ul li { background: #dddddd; } #cssmenu ul ul li ul li:hover { background: #b7b7b7; } #cssmenu .has-sub { position: relative; } #cssmenu .has-sub:after, #cssmenu .has-sub > ul > .has-sub:hover:after { content:''; display: block; width: 10px; height: 9px; position: absolute; right: 5px; top: 78%; margin-top: -5px; background-image: url(data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAMAAAA8eE0hAAAAUVBMVEX////MzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzNzc3l5eXg4ODZ2dnMzMzi4uLS0tLe3t7Q0NDV1dXj4+PW1tbk5OTc3NzPz8/R0dH0Zv5RAAAAC3RSTlMAM2YekAmlPHuEAwArv7wAAAA/SURBVHheY2Dl5mdigABGKV5BNnYok4dHQpKFGcrkEefj5gAzQUBABM7kFYQyRcX4mUBMkEpOLrA2IWGwfgYAn0UDZszv8IwAAAAASUVORK5CYII=); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } #cssmenu .has-sub > ul > .has-sub:after, #cssmenu .has-sub:hover:after { background-image: url(data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAMAAAA8eE0hAAAAUVBMVEX////d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3e3t729vbx8fHq6urd3d3z8/Pj4+Pv7+/h4eHm5ub09PTn5+f19fXt7e3g4ODi4uLUsVdlAAAAC3RSTlMAM2YekAmlPHuEAwArv7wAAAA/SURBVHheY2Dl5mdigABGKV5BNnYok4dHQpKFGcrkEefj5gAzQUBABM7kFYQyRcX4mUBMkEpOLrA2IWGwfgYAn0UDZszv8IwAAAAASUVORK5CYII=); } #cssmenu > ul > li.button { width: 64px; height: 64px; cursor:pointer; border:0.1em outset whitesmoke; } #cssmenu > ul > li.radar { width: 64px; height: 64px; background: whitesmoke url("images/radar.png") 0 0; border:0.1em outset whitesmoke; cursor:pointer; } #timeslider { height:1%; width:30%; position: absolute; top:95%; left:0; display:block; margin: 0px; padding: 0px; } #slideTime { height:1%; width:30%; position: absolute; top:93%; left:0; display:block; z-index:100; margin: 0px; padding: 0px; font-family:"Lucida Grande", "Arial", sans-serif; font-size: 12px; } #map-canvas { width: auto; position: absolute; top:0; bottom:0; left:0; right:0; z-index: 0; margin: 5px;border:0.1em outset #A0A0A0; padding: 0px; background-color:white; } body {background-color:whitesmoke;padding:1em;display:block;} .labels { color: black; font-family:"Lucida Grande", "Arial", sans-serif; font-size: 20px; font-weight: bold; text-align: center; width: 100px; white-space: nowrap; } #amount[readonly] { border:0; font-weight:bold; opacity:3; background-color: transparent; } #weather { display:none; } #weather.active { display:block; background-color:black; border:0.1em solid black; height:2em; width:2em; }