354 lines
10 KiB
HTML
354 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta
|
||
name="viewport"
|
||
content="initial-scale=1.0, user-scalable=no, width=device-width"
|
||
/>
|
||
<title>视频点位治理</title>
|
||
<!-- <link
|
||
rel="stylesheet"
|
||
href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
|
||
/> -->
|
||
<!-- <link rel="stylesheet" href="./css/video-js.min.css" /> -->
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
|
||
/>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
html,
|
||
body,
|
||
#container {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.amap-icon img {
|
||
width: 25px;
|
||
height: 34px;
|
||
}
|
||
|
||
.amap-marker-label {
|
||
border: 0;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.info {
|
||
position: relative;
|
||
margin: 0;
|
||
top: 0;
|
||
right: 0;
|
||
min-width: 0;
|
||
}
|
||
#dialog {
|
||
display: none;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
z-index: 1;
|
||
}
|
||
.content {
|
||
background: white;
|
||
margin: 0 auto;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
.left {
|
||
flex: 1;
|
||
}
|
||
.right {
|
||
display: flex;
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
flex-direction: column;
|
||
}
|
||
#mapDiv {
|
||
z-index: 0;
|
||
}
|
||
.btns {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.btn_close {
|
||
background: #909092;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
width: 100px;
|
||
height: 30px;
|
||
outline: none;
|
||
border: 0;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
textarea {
|
||
height: 90%;
|
||
margin-top: 20px;
|
||
}
|
||
video {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.btn_dispatch {
|
||
background: #5485f1;
|
||
color: #fff;
|
||
width: 100%;
|
||
height: 40px;
|
||
font-size: 18px;
|
||
outline: none;
|
||
border: 0;
|
||
border-radius: 4px;
|
||
margin-top: 20px;
|
||
}
|
||
.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;
|
||
}
|
||
.btn_map {
|
||
cursor: pointer;
|
||
/* background: #33907d;
|
||
border: 0;
|
||
color: #fff;
|
||
border-radius: 12px;
|
||
padding: 7px 15px; */
|
||
border: none;
|
||
outline: none;
|
||
background: url("./img/btn_map.png") no-repeat;
|
||
background-size: 100%;
|
||
width: 90px;
|
||
height: 28.5px;
|
||
/* width: 20%;
|
||
height: 100%; */
|
||
}
|
||
</style>
|
||
<script src="./js/jquery.min.js"></script>
|
||
<script src="./js/api.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- <img src="./img/jk.png" style="position: absolute; left:0;top:0;" alt=""> -->
|
||
<!-- <div
|
||
onclick="history.back()"
|
||
style="
|
||
text-align: left;
|
||
height: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
font-size: 20px;
|
||
"
|
||
>
|
||
< 列表模式
|
||
</div> -->
|
||
<!-- <div id="status"></div>
|
||
<div id="result"></div> -->
|
||
<div class="navTitle">
|
||
<button type="button" class="btn_map" onclick="listMode()">
|
||
<!-- 地图模式 -->
|
||
</button>
|
||
<!-- <select name="" id="groupType" onchange="handleGroupTypeChange()">
|
||
<option value="">全部</option>
|
||
<option value="1">城市道路积水</option>
|
||
<option value="2">河道水情观测</option>
|
||
</select> -->
|
||
</div>
|
||
<div id="container"></div>
|
||
<script
|
||
type="text/javascript"
|
||
src="https://webapi.amap.com/maps?v=2.0&key=b2d0af3352717eab4ccab7e5ba0c2f54"
|
||
></script>
|
||
|
||
<script type="text/javascript">
|
||
var current_position;
|
||
// 创建地图实例
|
||
var map = new AMap.Map("container", {
|
||
zoom: 11,
|
||
center: [107.535867, 31.228318],
|
||
resizeEnable: true,
|
||
});
|
||
// 中心点定位
|
||
// document.getElementById('adcode').innerHTML= '当前中心点：'+map.getCenter()
|
||
|
||
// 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;
|
||
// }
|
||
// var options = {};
|
||
// //判断手机是否支持该功能,并获取经纬度
|
||
// if (navigator.geolocation) {
|
||
// navigator.geolocation.getCurrentPosition(success, error, options);
|
||
// } else {
|
||
// alert("你的浏览器不支持定位功能");
|
||
// }
|
||
// //成功的回调
|
||
// function success(lo, la) {
|
||
// var la = position.coords.latitude;
|
||
// var lo = position.coords.longitude;
|
||
// alert("纬度" + la);
|
||
// alert("经度" + lo);
|
||
// //something.......
|
||
// }
|
||
// //失败的回调
|
||
// function error(errorCode) {
|
||
// alert("获取失败，原因：" + errorCode.message);
|
||
// }
|
||
// 确保地图已经加载完成
|
||
// console.log(223);
|
||
// AMap.service(["AMap.DistanceSearch"], function () {
|
||
// console.log(123);
|
||
// var distanceSearch = new AMap.DistanceSearch();
|
||
|
||
// // 计算距离的回调函数
|
||
// distanceSearch.on("complete", function (result) {
|
||
// if (result.info === "OK") {
|
||
// // result.results[0].distance 是两点之间的距离
|
||
// console.log(
|
||
// "距离是：" + result.results[0].distance.toFixed(2) + " 米"
|
||
// );
|
||
// }
|
||
// });
|
||
|
||
// // 计算两个坐标点之间的距离
|
||
// distanceSearch.search(
|
||
// [
|
||
// { keyword: "107.461343,31.22154" }, // 坐标1, 例如：北京天安门
|
||
// { keyword: current_position.lng + "," + current_position.lat }, // 坐标2, 例如：北京天安门附近的点
|
||
// ],
|
||
// AMap.DistanceSearch.DRIVING
|
||
// ); // 可以更换为 AMap.DistanceSearch.WALKING 或 AMap.DistanceSearch.TRANSIT
|
||
// });
|
||
|
||
var cluster;
|
||
var gridSize = 60;
|
||
var player;
|
||
|
||
var clickHandler = function (e) {
|
||
alert(
|
||
"您在[ " +
|
||
e.lnglat.getLng() +
|
||
"," +
|
||
e.lnglat.getLat() +
|
||
" ]的位置点击了地图！"
|
||
);
|
||
};
|
||
// 实例化点标记
|
||
function addMarker() {
|
||
if (!marker) {
|
||
marker = new AMap.Marker({
|
||
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
|
||
position: [116.406315, 39.908775],
|
||
offset: new AMap.Pixel(-13, -30),
|
||
});
|
||
marker.setMap(map);
|
||
}
|
||
}
|
||
function updateIcon() {
|
||
marker.setIcon(
|
||
"//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png"
|
||
);
|
||
}
|
||
|
||
function updateContent() {
|
||
if (!marker) {
|
||
return;
|
||
}
|
||
|
||
// 自定义点标记内容
|
||
var markerContent = document.createElement("div");
|
||
|
||
// 点标记中的图标
|
||
var markerImg = document.createElement("img");
|
||
markerImg.className = "markerlnglat";
|
||
markerImg.src =
|
||
"//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
|
||
markerImg.setAttribute("width", "25px");
|
||
markerImg.setAttribute("height", "34px");
|
||
markerContent.appendChild(markerImg);
|
||
|
||
// 点标记中的文本
|
||
var markerSpan = document.createElement("span");
|
||
markerSpan.className = "marker";
|
||
markerSpan.innerHTML = "Hi，我被更新啦！";
|
||
markerContent.appendChild(markerSpan);
|
||
|
||
marker.setContent(markerContent); //更新点标记内容
|
||
marker.setPosition([116.391467, 39.927761]); //更新点标记位置
|
||
}
|
||
|
||
// 清除 marker
|
||
function clearMarker() {
|
||
if (marker) {
|
||
marker.setMap(null);
|
||
marker = null;
|
||
}
|
||
}
|
||
</script>
|
||
<script src="./js/api.js"></script>
|
||
<script>
|
||
$(function () {
|
||
getList(1);
|
||
});
|
||
function listMode(){
|
||
window.location.href = "index.html";
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|