250 lines
7.2 KiB
HTML
250 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>达州雨季易涝点监控</title>
|
||
<script src="./js/jquery.min.js"></script>
|
||
<script src="./js/api.js"></script>
|
||
<script
|
||
type="text/javascript"
|
||
src="https://webapi.amap.com/maps?v=2.0&key=b2d0af3352717eab4ccab7e5ba0c2f54"
|
||
></script>
|
||
<script>
|
||
function mapMode() {
|
||
window.location.href = "map.html";
|
||
}
|
||
|
||
// console.log(AMap.GeometryUtil.distance([104.0575,30.5686], [107.461343,31.22154]))
|
||
AMap.plugin("AMap.Geolocation", function () {
|
||
var geolocation = new AMap.Geolocation({
|
||
enableHighAccuracy: true, //是否使用高精度定位，默认:true
|
||
timeout: 10000, //超过10秒后停止定位，默认：5s
|
||
position: "RB", //定位按钮的停靠位置
|
||
offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
|
||
zoomToAccuracy: false, //定位成功后是否自动调整地图视野到定位点
|
||
});
|
||
// map.addControl(geolocation);
|
||
geolocation.getCurrentPosition(function (status, result) {
|
||
console.log(status, result);
|
||
if (status == "complete") {
|
||
onComplete(result);
|
||
} else {
|
||
onError(result);
|
||
}
|
||
});
|
||
});
|
||
function onComplete(data) {
|
||
console.log(data);
|
||
localStorage.setItem("local", data.position);
|
||
// document.getElementById("status").innerHTML = "定位成功";
|
||
// var str = [];
|
||
// str.push("定位结果：" + data.position);
|
||
// current_position = data.position;
|
||
// str.push("定位类别：" + data.location_type);
|
||
// if (data.accuracy) {
|
||
// str.push("精度：" + data.accuracy + " 米");
|
||
// } //如为IP精确定位结果则没有精度信息
|
||
// str.push("是否经过偏移：" + (data.isConverted ? "是" : "否"));
|
||
// document.getElementById("result").innerHTML = str.join("<br>");
|
||
}
|
||
//解析定位错误信息
|
||
function onError(data) {
|
||
// document.getElementById("status").innerHTML = "定位失败";
|
||
// document.getElementById("result").innerHTML =
|
||
// "失败原因排查信息:" +
|
||
// data.message +
|
||
// "</br>浏览器返回信息：" +
|
||
// data.originMessage;
|
||
}
|
||
</script>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
body {
|
||
background: #f1f4f5;
|
||
}
|
||
.videoList {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
flex-direction: row;
|
||
margin-top: 20px;
|
||
}
|
||
.bg1 {
|
||
background: url("./img/item_bg1.png") no-repeat;
|
||
}
|
||
.bg2 {
|
||
background: url("./img/item_bg2.png") no-repeat;
|
||
}
|
||
.videoItem {
|
||
width: 48%;
|
||
/* border: 1px solid #000; */
|
||
/* background: #fff; */
|
||
/* background: url("./img/item_bg.png") no-repeat; */
|
||
background-size: cover;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.videoItem1 {
|
||
width: 48%;
|
||
/* border: 1px solid #000; */
|
||
/* background: #fff; */
|
||
/* background: url("./img/item_bg1.png") no-repeat; */
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
background-size: cover;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
img {
|
||
width: 100%;
|
||
height: 100px;
|
||
border-radius: 8px;
|
||
}
|
||
.videoItem:nth-child(2n) {
|
||
margin-right: 0;
|
||
}
|
||
.main {
|
||
padding-left: 15px;
|
||
padding-right: 15px;
|
||
}
|
||
video {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.navTitle {
|
||
/* text-align: center; */
|
||
/* padding: 24px 44px; */
|
||
padding: 5% 6%;
|
||
width: 100%;
|
||
height: 86px;
|
||
background: url("./img/navTitle.png") no-repeat;
|
||
background-size: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
/* align-items: center; */
|
||
justify-content: space-between;
|
||
}
|
||
.videoBox {
|
||
position: relative;
|
||
}
|
||
.name {
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
margin: 10px;
|
||
/* margin-bottom: 10px; */
|
||
/* padding-left: 10px; */
|
||
}
|
||
.status {
|
||
background: #55aa7f;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
padding: 5px 10px;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
border-radius: 0px 4px 4px 4px;
|
||
}
|
||
.err{
|
||
background: #e21e1e;
|
||
}
|
||
.btn_map {
|
||
cursor: pointer;
|
||
/* background: #33907d;
|
||
border: 0;
|
||
color: #fff;
|
||
border-radius: 12px;
|
||
padding: 7px 15px; */
|
||
border: none;
|
||
outline: none;
|
||
background: url("./img/btn_list.png") no-repeat;
|
||
background-size: 100%;
|
||
width: 90px;
|
||
height: 28.5px;
|
||
/* width: 20%;
|
||
height: 100%; */
|
||
}
|
||
.positionDiv {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
font-size: 12px;
|
||
}
|
||
.icon_position {
|
||
background: url("./img/icon_position1.png") no-repeat;
|
||
background-size: cover;
|
||
display: inline-block;
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 5px;
|
||
margin-left: 8px;
|
||
}
|
||
select {
|
||
float: right;
|
||
/* height: 30px;
|
||
width: 128px; */
|
||
width: 90px;
|
||
height: 28.5px;
|
||
border-radius: 16px;
|
||
padding-left: 5px;
|
||
outline: none;
|
||
}
|
||
.videoListTitle {
|
||
background: url("./img/icon_title.png") no-repeat;
|
||
padding-left: 30px;
|
||
padding-top: 2px;
|
||
/* background-color: blue; */
|
||
/* padding: 10px; */
|
||
/* background-size: cover; */
|
||
/* color: #fff; */
|
||
}
|
||
</style>
|
||
<script>
|
||
$(function () {
|
||
getList();
|
||
});
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div class="navTitle">
|
||
<button type="button" class="btn_map" onclick="mapMode()">
|
||
<!-- 地图模式 -->
|
||
</button>
|
||
<select name="" id="groupType" onchange="handleGroupTypeChange()">
|
||
<option value="">全部</option>
|
||
<option value="1">城市道路积水</option>
|
||
<option value="2">河道水情观测</option>
|
||
</select>
|
||
</div>
|
||
<div class="main">
|
||
<!-- <div class="navTitle">
|
||
<div class="navBack"></div>
|
||
<div class="title">易涝点查询</div>
|
||
</div> -->
|
||
|
||
<!-- 1 城市道路积水, 2 河道水情观测 -->
|
||
|
||
<div class="videoBox">
|
||
<div class="videoList1">
|
||
<!-- <div class="videoListTitle">城市道路积水</div> -->
|
||
<div class="videoList"></div>
|
||
</div>
|
||
<div class="videoList2">
|
||
<!-- <div class="videoListTitle">河道水情观测</div> -->
|
||
<div class="videoList"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|