<!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
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功