无法在网页上显示和隐藏雷达图层

无法在网页上显示和隐藏雷达图层

关注
发信
关注(28)粉丝(399)

无法在网页上显示和隐藏雷达图层

本文介绍了无法在网页上显示和隐藏雷达图层的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 对于我的生活，我不能想出如何在点击相关按钮时切换这个谷歌地图雷达图层以显示和隐藏。任何帮助将不胜感激！ 基本上，每当我点击雷达按钮时，我希望此功能可以打开和关闭。 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： < li id =wxxxclass ='radar'> < ul id =weather>< / ul> 这是 jsFiddle 我对jsfiddle很新，所以我不太清楚如何正确显示图像。以下是该网站的图片： http://imgur.com/6tpVuDA 解决方案所以是的..答案实际上相当容易解决，而无需在jsfiddle上查看示例代码的输出 window.setInterval（< function>，< value>）返回一个句柄，也称为timerId。 清除间隔计时器，你使用 window.clearInterval（timerId） ..隐藏雷达，你迭代 overlayMapTypes 并将 opacity 设置为 0 var timerId = -1; 函数animateRadar（overlayMapTypes）{ index = map.overlayMapTypes.getLength（） - 1; if（timerId> = 0）{ //停止计时器 window.clearInterval（timerId）; timerId = -1; //隐藏overlayMayTypes for（var i = 0，max = map.overlayMapTypes.length; i< max; i ++） { map.overlayMapTypes .getAt（ⅰ）.setOpacity（0.00）; } 返回; } 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）; } 为了完整性...... 我将把代码示例带到这个答案中（希望我可以为此隐藏样式，但这不在stacksnippet功能中....但是） 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（）{f或（var i = 0;我< 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（ 阿尔法）; times.push（ 1425059747829）; colors.push（ 红）; mapPoints.push（new google.maps.LatLng（33.73041，-85.79264））; names.push（ 差值）; times.push（ 1425059172108）; colors.push（ 蓝）; mapPoints.push（new google.maps.LatLng（33.72476，-85.788185））; names.push（ 高尔夫）; times.push（ 1425050587395）; colors.push（ 绿）;的console.log（名称）; / ** 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 = setTimeout（'fetchNewest（）'，10000）; ** /} //结束fetchNewestfunction 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（）{//加载图片并将它们添加到imageArray tileNEX = new google.maps.ImageMapType（{getTileUrl：function（tile，zoom）{returnhttp://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）{returnhttp://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），不透明度：0.00，名称：'NEXRAD5'，isPng：true}）; map.overlayMapTypes.push（tileNEX5）; tileNEX10 = new google.maps.ImageMapType（{getTileUrl：function（tile，zoom）{returnhttp://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），不透明度：0.00，名称：'NEXRAD10'，isPng：true，optimized：false}）; map.overlayMapTypes.push（tileNEX10）; tileNEX15 = new google.maps.ImageMapType（{getTileUrl：function（tile，zoom）{returnhttp://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），不透明度：0.00，名称：'NEXRAD15'，isPng：true}）; map.overlayMapTypes.push（tileNEX15）; tileNEX20 = new google.maps.ImageMapType（{getTileUrl：function（tile，zoom）{returnhttp://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），不透明度：0.00，名称：'NEXRAD20'，isPng：true}）; map.overlayMapTypes.push（tileNEX20）; tileNEX25 = new google.maps.ImageMapType（{getTileUrl：function（tile，zoom）{returnhttp://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），不透明度：0.00，名称：'NEXRAD25'，isPng：true}）; map.overlayMapTypes.push（tileNEX25）; tileNEX30 = new google.maps.ImageMapType（{getTileUrl：function（tile，zoom）{returnhttp://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），不透明度：0.00，名称：'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]）{//此点应连接到前一点，所以画一条线if（markerOpacity> 0）{//只有当它不是完全透明时才添加它varlineCoords = [mapPoints [i - 1]，mapPoints [i]]; var lineToDraw = new google.maps.Polyline（{path：lineCoords，map：map，strokeColor：'＃000000'，strokeOpacity：markerOpacity，strokeWeight：2}）; lines.push（lineToDraw）; } //也可以稍微淡化标记的不透明度，然后将其设置回图层markerOpacity = Math.max（markerOpacity - .1,0）; zIndex - = 1; } else {//这是一个新名称markerOpacity = 1.0; zIndex = 10; } if（markerOpacity> 0）{//添加标记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）}）; //基于小队颜色设置标签文本颜色var lightColors = new Array（yellow，pink）; if（lightColors.indexOf（colors [i] .toLowerCase（））！= -1）{//将标签设置为黑色文本marker.labelStyle.color =black; } else {marker.labelStyle.color =white; } //缩短小队名称var squadNames = {alpha：A，bravo：B，charlie：C，delta：D，echo：E，foxtrot：F，golf：G }; marker.labelContent = squadNames [marker.labelContent.toLowerCase（）]; markers.push（标记）; bounds.extend（mapPoints [I]）; } //添加标记的结束} if（！initialCenterFocused）{initialCenterFocused = true; map.fitBounds（边界）; } console.log（names）;} // updateMap函数的结尾moveForward（）{console.log（前进）; 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（）{//设置滑块jQuery（＃timeslider）。slider（{range：true，min：0，max：600，step： 0.1，值：[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（）;}）; //设置按钮jQuery（function（）{jQuery（＃myButton）。click（function（event）{if（！isPlaying）{isPlaying = true; jQuery（＃myButton）。prop（value， 暂停）; clearTimeout（计时器）; moveForward（）;} else {isPlaying = false; jQuery（＃myButton）。prop（value，Play）; clearTimeout（playTimer）;}}）;} ）;} // setupInterfacefunction的结束initialize（）{setupInterface（）; fetchNewest（）; createMap（）;} google.maps.event.addDomListener（window，'load'，initialize）; function wx（）{animateRadar（）;} $（＃wxxx）。click（function（）{$（＃ weather）。toggleClass（active）; wx（）;}）; / *检查是否单击了复选框并显示输出到console * / function checkBoxValues（form）{var values = []; var squads = form.squads; / *遍历复选框* / for（var i in form.squads）{if（squads [i] .checked）{values.push（squads [i] .value）; / *记录控制台* /警告的值（Squads：+ values.join（'，'））;返回值;} initialize（）; // ***点击打开Squads **** / * Flyout菜单的初学者CSS * / #cssmenu {top：50％;填充：0;保证金：0;边界：0;显示：块; position：relative;}＃cssmenu ul，li {list-style：none;保证金：0; padding：0;} #cssmenu ul {position：relative; z-index：597; float：left;}＃cssmenu ul li {float：left;最小高度：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;位置：绝对;上：100％;左：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：'';显示：块; 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;背景剪辑：填充盒;}＃cssmenu UL，#cssmenu李{宽度：100％;}＃cssmenu李{背景：#DDDDDD URL（数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAMAAAA8eE0hAAAAUVBMVEX //// MzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzNzc3l5eXg4ODZ2dnMzMzi4uLS0tLe3t7Q0NDV1dXj4 + PW1tbk5OTc3NzPz8 / R0dH0Zv5RAAAAC3RSTlMAM2YekAmlPHuEAwArv7wAAAA / SURBVHheY2Dl5mdigABGKV5BNnYok4dHQpKFGcrkEefj5gAzQUBABM7kFYQyRcX4mUBMkEpOLrA2IWGwfgYAn0UDZszv8IwAAAAASUVORK5CYII =）repeat-x; background-image：-webkit-gradient（线性，左上，左下，颜色停止（0，＃e5e5e5），颜色停止（1，＃ddddd））; 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;行高：160％;填充：11px 28px 11px 28px;宽度：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 li li {background：#ddddd;}＃cssmenu ul ul li li li：hover {background：＃b7b7b7;}＃cssmenu .has-sub {position：relative ;}＃cssmenu .has-sub：after，＃cssmenu .has-sub> ul> .has-sub：hover：after {content：'';显示：块;宽度：10px;身高：9px;位置：绝对;右：5px;最高：78％; margin-top：-5px;背景图像：URL（数据：图像/ 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> 。先后子：后，#cssmenu。先后子：悬停：后{背景图像：URL（数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAMAAAA8eE0hAAAAUVBMVEX //// d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3e3t729vbx8fHq6urd3d3z8 / PJ4 + PV7 + / + h4eHm5ub09PTn5 f19fXt7e3g4ODi4uLUsVdlAAAAC3RSTlMAM2YekAmlPHuEAwArv7wAAAA / SURBVHheY2Dl5mdigABGKV5BNnYok4dHQpKFGcrkEefj5gAzQUBABM7kFYQyRcX4mUBMkEpOLrA2IWGwfgYAn0UDZszv8IwAAAAASUVORK5CYII =） ;}＃cssmenu> ul> li.button {宽度：64px;身高：64​​px;光标：指针; border：0.1em outset whitesmoke;}＃cssmenu> ul> li.radar {宽度：64px;身高：64​​px; background：whitesmoke url（images / radar.png）0 0;边境：0.1em开始白人; cursor：pointer;} #timeslider {height：1％;宽度：30％;位置：绝对;顶部：95％;左：0;显示：块;保证金：0px; padding：0px;}＃slideTime {height：1％;宽度：30％;位置：绝对;顶部：93％;左：0;显示：块;的z-index：100;保证金：0px;填充：0px; font-family：Lucida Grande，Arial，sans-serif; font-size：12px;} #map-canvas {width：auto;位置：绝对;顶部：0;底部：0;左：0;右：0; z-index：0;保证金：5px;边界：0.1em开头＃A0A0A0;填充：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;宽度：100px; white-space：nowrap;}＃amount [readonly] {border：0;字体重量：粗体;不透明度：3; background-color：transparent;} #weather {display：none;} #weather.active {display：block;背景色：黑色;边框：0.1em纯黑色;高度：2em的; width：2em;} < script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< script src =https://code.jquery.com/ui/ 1.11.3 / jquery-ui.min.js>< / script>< script src =https://maps.googleapis.com/maps/api/js>< / script>< div id ='cssmenu'> < UL> < li id =myButtonclass ='button'> Button< / li> < li id =wxxxclass ='radar'> Radar< ul id =weather>< / ul> < /锂> < / ul>< / div>< div id =timeslider>< / div>< div id =slideTime> < label for =amount>分钟前：< / label> < input type =textid =amountreadonly />< / div>< div id =map-canvas>< / div> I can't, for the life of me, figure out how to toggle this google maps radar layer to show and hide whenever I click the associated button. Any help would be appreciated!Basically, I want this function to toggle on and off whenever I click my "radar" button. 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:<li id ="wxxx"class='radar'> <ul id="weather"></ul>Here's the jsFiddleI'm pretty new to jsfiddle, so I'm not too sure how to display images properly. Here's an image of the site as well:http://imgur.com/6tpVuDA 解决方案 so yeah.. the answer is actually fairly easy to address without reviewing the output of your sample code on jsfiddlewindow.setInterval(<function>,<value>) returns a handle, otherwise known as a timerId.to clear the interval timer, you use window.clearInterval(timerId).. to hide the radar, you iterate over overlayMapTypes and set opacity to 0var 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);}For completeness...I'm going to bring the code sample into this answer (wish I could hide the styling for this, but that isn't in the stacksnippet feature .... yet)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 fetchNewestfunction 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 updateMapfunction 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 setupInterfacefunction 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;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script><script src="https://maps.googleapis.com/maps/api/js"></script><div id='cssmenu'> <ul> <li id="myButton" class='button'>Button</li> <li id="wxxx" class='radar'>Radar <ul id="weather"></ul> </li> </ul></div><div id="timeslider"></div><div id="slideTime"> <label for="amount">Minutes ago:</label> <input type="text" id="amount" readonly /></div><div id="map-canvas"></div> 这篇关于无法在网页上显示和隐藏雷达图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
10-24 17:30
Powered by LMLPHP ©2024 无法在网页上显示和隐藏雷达图层 0.001960