<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>空气污染监测系统</title>
<link href="css/mapbox.css" rel="stylesheet" type="text/css" />
<link href="css/map.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/comon0.css">
<script src="js/sea.js"></script>
<script src="js/common.js"></script>
<script src='js/mapbox.js' type="text/javascript"></script>
<script src="js/jquery1.10.2.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery.mapbox.js"></script>
<script src="js/jquery.autocomplete.js"></script>
<script>
$(window).load(function () {
$(".loading").fadeOut()
})
/****/
$(document).ready(function () {
var whei = $(window).width()
$("html").css({ fontSize: whei / 20 })
$(window).resize(function () {
var whei = $(window).width()
$("html").css({ fontSize: whei / 20 })
});
});
</script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<!--<script language="JavaScript" src="js/js.js"></script>-->
</head>
<body>
<!--注释用的色条-->
<div class="map_description">
<span>*只统计已监测PM2.5的城市</span>
<div class="clear"></div>
<p><i class="map_level_bg1" href="">优</i><i class="map_level_bg2" href="">良</i><i class="map_level_bg3" href="">轻度污染</i><i class="map_level_bg4" href="">中度污染</i><i class="map_level_bg5" href="">重度污染</i><i class="map_level_bg6" href="">严重污染</i></p>
</div>
<!--调用JS显示地图-->
<div id="map" class="map"> </div>
<script>
</script>
<!--导航-->
<div class="map_menu" >
<!--顶部功能条-->
<div class="topnav_width">
<div class="topnav">
<div class="topnav_left">
<a class="topnav_sitemap" href="" style="padding-bottom:8px;">网站导航</a>
<!-- <div class="topnav_sitemap_active" style="display:none;">-->
<!-- <div class="topnav_sitemap_main">-->
<!-- <div class="tsm_row">-->
<div class="tsm_row_item">
<a href="./首页.html">首页</a>
<a href="./空气质量简介.html">空气质量简介</a>
<a>实时监测</a>
</div>
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
<div class="map_leftbar">
<!--默认是有“map_leftbar_control_yes”这个的。当收缩到左侧后，这个就变成“map_leftbar_control_no”-->
<a class="map_leftbar_control map_leftbar_control_no" href="javascript:void(0)" style="display:none;"><i></i></a>
<a class="map_leftbar_control map_leftbar_control_yes" href="javascript:void(0)"><i></i></a>
<!--搜索-->
<div class="map_leftbar_search">
<p class="map_leftbar_serch_input1">智能污染物监测平台</p>
<p class="map_leftbar_serch_input">
<input type="text" value="" placeholder="输入城市名" class="search_city_text" id="autocomplete">
<input type="button" class="search_btn">
<div class="clear"></div>
</p>
<div class="map_leftbar_search_result">
<!--搜索结果面板，默认两个都是none的状态，没结果第一个变为block，有结果的时候第二个是block状态-->
<div class="map_leftbar_search_result_no" style="display:none;">
<span class="nodata_lefticons"><i></i></span>
<span class="nodata_leftinfo">你所查询的城市暂时没有检测点数据。如有疑问，请向我们反馈！<a href="">点这里>></a></span>
</div>
<div class="map_leftbar_search_result_yes" style="display:none;">
<ul class="city_searched_result">
<li><a href="">保定</a></li>
<li><a href="">北京</a></li>
<li><a href="">北海</a></li>
</ul>
</div>
</div>
</div>
<!--当前所在城市指数-->
<dl class="map_leftbar_location">
<dt>你所在城市: <span>北京</span></dt>
<dd>
<p>
<a class="leftbarl_num">
<i>42</i>
</a>
<span>AQI指数</span>
</p>
<p style="border-left:#4c4d55 solid 1px;">
<span class="leftbarl_num">
<i>140</i>
</span>
<span>全国排名</span>
</p>
<div class="clear"></div>
</dd>
</dl>
<!--排行榜-->
<dl class="map_leftbar_city">
<dt>AQI指数城市排行榜</dt>
<div class="map_leftbar_mainbox">
<ul class="clearfix">
<li>
<div class="boxall" style="height: 3.2rem">
<div class="alltitle">空气质量最优城市</div>
<div class="allnav" id="echart1"></div>
<div class="boxfoot"></div>
</div>
<div class="boxall" style="height: 3.2rem">
<div class="alltitle">空气质量最差城市</div>
<div class="allnav" id="echart2"></div>
<div class="boxfoot"></div>
</div>
</li>
</ul>
</div>
</dl>
</div>
</div>
<!-- 少两个div-->
</div>
</div>
</body>
</html>
<style>
.autocomplete-suggestions{position:absolute; top:64px; left:20px; width:267px; background-color:#393e45; overflow-x:hidden;margin-top:4px; z-index:20;}
.autocomplete-suggestion{float:left; display:inline; width:267px;}
.autocomplete-suggestion a{float:left; display:inline; width:267px; height:30px; line-height:30px; text-indent:20px; border-bottom:#2f3640 dotted 1px; color:#94a3b3;}
.autocomplete-suggestion a:hover{background-color:#606469; color:#fff;}
</style>
<script>
seajs.use(['$', 'mapbox', 'autocomplete'], function($){
$(document).ready(function(){
L.mapbox.accessToken = 'pk.eyJ1IjoiZmd4dHJ1ZSIsImEiOiJBREhUX0FzIn0.8qfZHQ1yYxG9Bx0hmfAq_g';
var map = L.mapbox.map('map', 'gpea.gelcma91', {zoomControl: false,minZoom: 4,maxZoom: 8,maxBounds: new L.LatLngBounds(new L.LatLng(15, 58), new L.LatLng(58, 150))}).setView([34, 108.9], 5);
//var map = L.mapbox.map('map', 'gpea.gelcma91', {zoomControl: false,minZoom: 4,maxZoom: 8,maxBounds: new L.LatLngBounds(new L.LatLng(15, 58), new L.LatLng(58, 150))}).setView([34, 108.9], 5);
var b = bowser();
map.touchZoom.disable();
map.doubleClickZoom.disable();
//map.scrollWheelZoom.disable();
if(b.msie && b.version<=8.0)map.scrollWheelZoom.disable();
var geoJson = [
{type: 'Feature','geometry': { 'type': 'Point', 'coordinates': [82.98, 46.75]},'properties': {'marker-size': 'small','aqi': '15','quality': '良','marker-color': '#6eb720','url': './city/tacheng.html','city': '塔城','pm': '1','one': '优','level':1,'ltime': '2019-11-05 20:00'}},
{type: 'Feature','geometry': { 'type': 'Point', 'coordinates': [102.32, 24.22]},'properties': {'marker-size': 'small','aqi': '15','quality': '良','marker-color': '#6eb720','url': './city/yuxi.html','city': '玉溪','pm': '2','one': '优','level':1,'ltime': '2019-11-05 20:00'}},
{type: 'Feature','geometry': { 'type': 'Point', 'coordinates': [130.32, 46.81]},'properties': {'marker-size': 'small','aqi': '19','qualit
空气质量检测.zip （422个子文件） 
common.css 30KB common.css 30KB common.css 30KB model.css 29KB new.css 28KB citydata.css 25KB citydata.css 25KB citydata.css 25KB mapbox.css 18KB map.css 14KB comon0.css 7KB
首页(6).html 153KB 首页.html 153KB beijing原.html 37KB beijing.html 24KB xian.html 24KB qingdao.html 23KB wuhan原.html 23KB wuhan.html 23KB foshan.html 23KB wuxi.html 23KB haerbin.html 22KB shanghai.html 22KB guangzhou.html 22KB anshan.html 22KB guiyang.html 22KB hangzhou.html 22KB dalian.html 22KB chongqing.html 22KB hefei.html 21KB nanjing.html 21KB wulumuqi.html 21KB shenzhen.html 21KB baoji.html 20KB shenyang.html 20KB jinan.html 20KB huhehaote.html 20KB ningbo.html 20KB fushun.html 20KB shijiazhuang.html 20KB changchun.html 20KB zhengzhou.html 20KB nanchang.html 20KB suzhou.html 20KB fuzhoushi.html 20KB putian.html 20KB kelamayi.html 20KB kunming.html 20KB panzhihua.html 20KB fuzhou.html 20KB zhuzhou.html 20KB nanning.html 20KB taiyuan.html 20KB chengdu.html 20KB weinan.html 20KB jilin.html 20KB pingxiang.html 19KB qinhuangdao.html 19KB wenzhou.html 19KB qiqihaer.html 19KB quanzhou.html 19KB huainan.html 19KB hengyang.html 19KB baoding.html 19KB fuyangshi.html 19KB tangshan.html 19KB benxi.html 19KB baotou.html 19KB zhanjiang.html 19KB zibo.html 19KB tongling.html 19KB yueyang.html 19KB puyang.html 19KB kuerle.html 19KB bengbu.html 19KB lasa.html 19KB weifang.html 19KB shantou.html 19KB pingdingshan.html 19KB yangquan.html 19KB liuzhou.html 19KB jiujiang.html 19KB wuhu.html 19KB quzhou.html 19KB wujiang.html 19KB wuhai.html 19KB panjin.html 19KB weihai.html 19KB qingyang.html 19KB zaozhuang.html 18KB yiyang.html 18KB luoyang.html 18KB yuncheng.html 18KB jincheng.html 18KB huizhou.html 18KB datong.html 18KB yichang.html 18KB yongzhou.html 18KB changzhi.html 18KB dazhou.html 18KB共 422 条
- 1
- 2
- 3
- 4
- 5
资源评论
qq_29443371
- 粉丝: 8
- 资源: 2
最新资源
- RFM数据分析作业.rar
- IEEE标准节点仿真模型 1、IEEE2机5节点 2、IEEE6节点 3、IEEE3机9节点 4、IEEE13节点 5、IEE
- html实现跨年烟花代码，点击页面即可放烟花
- 关键词采集器6.0.zip
- PNG转ICO工具1.0.zip
- 端口批量扫描器6.0.zip
- 网站备份扫描器6.0.zip
- 网站批量检测有效性6.0.zip
- 网站标题采集器TDK6.0.zip
- html实现新年烟花代码，点击页面即可放烟花
- 跨年烟花代码，js烟花效果
- 跨年烟花代码实现不一样的烟火
- html新年烟花代码特效，不间断播放烟花
- 跨年烟花代码-html5
- 第3步：linux安装jdk.doc
- 生成chirp信号的matlab代码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
