From ffc9f497ed62c2d0814dfdf64c80c2f8fd8a769f Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Thu, 17 Jun 2021 22:31:05 +0800
Subject: [PATCH] 1.警情点击当前位置时，地图定位到当前位置点 2.警情信息调整，样式修改，信息上下拉动bug修复
---
xcxjingqingmap_patrol/js/move.js | 2
xcxMapJQ/css/body.css | 172 +++++++---
xcxMapJQ/js/move.js | 91 +++--
pages/myself/myself.vue | 1
xcxMapJQ/js/vueMain.js | 453 +++++++++++-----------------
xcxMapJQ/xcxmap.html | 236 +++++++-------
6 files changed, 463 insertions(+), 492 deletions(-)
diff --git a/pages/myself/myself.vue b/pages/myself/myself.vue
index 1b981ff..76bc805 100644
--- a/pages/myself/myself.vue
+++ b/pages/myself/myself.vue
@@ -230,6 +230,7 @@
},
success: (data) => {
that.useimg = JSON.parse(data.data).data;
+ that.$store.state.avatar = that.useimg;
//修改用户头像信息
uni.request({
url:"http://s16s652780.51mypc.cn/api/blade-user/updateUserInfo",
diff --git a/xcxMapJQ/css/body.css b/xcxMapJQ/css/body.css
index 0125b04..9f1731e 100644
--- a/xcxMapJQ/css/body.css
+++ b/xcxMapJQ/css/body.css
@@ -1,9 +1,17 @@
+page {
+ width: 100%;
+ height: 100%;
+ background-color: rgb(138, 138, 138, 0.1);
+}
+
body {
padding: 0;
margin: 0;
}
-html, body, #mapVue {
+html,
+body,
+#mapVue {
width: 100%;
height: 100%;
}
@@ -36,13 +44,11 @@
}
#seedata {
- position: fixed;
bottom: 0;
width: 100%;
- height: 70%;
+ height: 50%;
z-index: 400;
background-color: #fff;
- /* opacity: 0.9; */
display: flex;
flex-direction: column;
border-radius: 60px 60px 0 0;
@@ -50,33 +56,33 @@
.title {
width: 100%;
- height: 20%;
- /* border: 1px solid springgreen; */
- border-radius: 60px 60px 0 0;
- position: relative;
- /* top: -3%; */
+ height: 70px;
+ border-radius: 30px 30px 0 0;
+ position: absolute;
+ bottom: 0;
background-color: #fff;
- z-index: 101;
+ z-index: 999;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
-.title-span {
- height: 15%;
+.device-name {
+ letter-spacing: 2px;
+ font-size: 15px;
}
-/* .title::after {
- content: '';
- display: block;
- width: 40px;
- height: 40px;
- border: springgreen solid 1px;
-} */
+.device-number {
+ margin-top: 5px;
+ letter-spacing: 0.5px;
+ color: #808080;
+ font-size: 13px;
+}
.main {
- width: 95%;
+ width: 100%;
+ height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
@@ -85,47 +91,110 @@
border-top: 1px solid rgb(138, 138, 138);
}
-.f-m-once {
- /* border: 1px solid rgb(194, 142, 0); */
+.div-alarm-people {
+ width: 96%;
+ height: 25%;
+ margin-left: 2%;
+ /* height: 80px; */
+}
+
+.div-alarm-people .f-m-once {
+ border-bottom: 1px solid rgb(243, 243, 243);
+ align-items: center;
width: 100%;
- height: 100%;
+ height: 50%;
+ display: flex;
+ margin: auto;
+}
+
+.div-alarm-people .f-m-o-t-img {
+ width: 20px;
+ height: 20px;
+ float: left;
+}
+
+.div-alarm-people .f-m-o-title {
+ font-size: 14px;
+ margin-left: 10px;
+ float: left;
+}
+
+.div-alarm-people .f-m-once-phone-number {
+ /* border-bottom: 1px solid rgb(128, 128, 128, 0.1); */
+ align-items: center;
+ width: 100%;
+ height: 50%;
+ display: flex;
+ margin: auto;
+}
+
+.div-alarm-people .f-m-once-alarm-type {
+ /* border-bottom: 1px solid rgb(128, 128, 128, 0.1); */
+ align-items: center;
+ width: 100%;
+ height: 50%;
+ display: flex;
+ margin: auto;
+}
+
+.div-alarm-people .f-m-once-desc {
+ /* border-bottom: 1px solid rgb(128, 128, 128, 0.1); */
+ width: 100%;
+ height: 50% !important;
+ height: 80px;
display: flex;
align-items: center;
- justify-content: center;
- padding: 8px 0 8px 0
}
-.f-m-o-title {
+.div-alarm-people .f-m-o-t-img-desc {
+ width: 20px;
+ height: 20px;
+ float: left;
+}
+
+.div-alarm-people .f-m-o-title-desc {
display: flex;
align-items: center;
- width: 40%;
+ height: 40px;
+ line-height: 40px;
+ font-size: 14px;
+ margin-left: 10px;
+ float: left;
}
-.f-m-o-t-img {
- width: 30px;
- height: 30px;
- padding-right: 10px;
+.div-alarm-people .f-m-o-center {
+ font-size: 14px;
+ position: absolute;
+ left: 135px;
+ color: #808080;
}
-.f-m-o-center {
- width: 60%;
+.div-alarm-people .f-m-o-center-desc {
+ width: 200px;
+ word-wrap: break-word;
+ line-height: 1.5;
+ /* height: 60px; */
+ /* background-color: rgb(46, 118, 228); */
+ font-size: 14px;
+ position: absolute;
+ left: 135px;
+ color: #808080;
}
-.el-divider {
- margin: 0 auto;
- width: 90%;
+.interval {
+ width: 100%;
+ height: 2%;
+ background-color: rgb(243, 243, 243);
}
.but {
width: 100%;
+ height: 19%;
+ flex: 1;
display: flex;
+ flex-direction: row;
align-items: center;
justify-content: space-around;
- padding-top: 5px;
-}
-
-.buta {
- /* border: 1px solid #4D7CEE; */
}
.shipingPopup {
@@ -154,21 +223,24 @@
height: 50px;
}
+
/* video::-webkit-media-controls-timeline {
display: none;
} */
.butb {
- width: 80px;
- height: 80px;
- border: 1px solid rgb(46, 118, 228);
+ width: 200px;
+ height: 40px;
+ /* border: 1px solid rgb(46, 118, 228); */
border-radius: 40px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
- background-image: linear-gradient(to bottom, #3CA7F4, #4D7CEE);
+ /* background-image: linear-gradient(to bottom, #3CA7F4, #4D7CEE); */
+ background-image: linear-gradient(to bottom, #00BFFF, #4D7CEE);
}
+
/* .resultFeedback {
position: fixed;
@@ -182,6 +254,7 @@
align-items: center;
justify-content: center;
} */
+
/* .b-r-main {
width: 90%;
@@ -220,19 +293,20 @@
}
.b-r-i-o-ups{
/* align-items: center; */
+
+
}
.b-r-m-i-o-c-img {
width: 50px;
height: 50px;
}
-.b-r-m-but{
+.b-r-m-but {
position: relative;
left: calc(50% - 40px);
-} */
-.butc {
+}
+*/ .butc {
/* border: 1px solid #4D7CEE; */
}
-
.b-b-img {
width: 40px;
height: 40px;
diff --git a/xcxMapJQ/js/move.js b/xcxMapJQ/js/move.js
index 4523a00..b2ac24c 100644
--- a/xcxMapJQ/js/move.js
+++ b/xcxMapJQ/js/move.js
@@ -3,36 +3,36 @@
this.m = $(dom);
this.div = $(div);
this.mapId = $(map);
- this.__xx = null;//鼠标实时位置
+ this.__xx = null; //鼠标实时位置
this.__yy = null;
- this.__sx = null;//鼠标开始位置
+ this.__sx = null; //鼠标开始位置
this.__sy = null;
- this.__dx = null;//dom位置
+ this.__dx = null; //dom位置
this.__dy = null;
- this.mapH = null;//地图高度
- this.__wy = null;//屏幕高度
- this.state = "up";//dom状态默认up
+ this.mapH = null; //地图高度
+ this.__wy = null; //屏幕高度
+ this.state = "up"; //dom状态默认up
- this.getMosePosition = (x, y) => {//获取鼠标位置
+ this.getMosePosition = (x, y) => { //获取鼠标位置
this.__sx = x;
this.__sy = y;
// console.log(this.__sy, '鼠标开始');
}
- this.getDomPosition = () => {//获取dom位置
+ this.getDomPosition = () => { //获取dom位置
this.__dx = this.m.offset().left;
this.__dy = this.m.offset().top;
this.__wy = document.documentElement.clientHeight;
// console.log(this.__dy, 'dom');
}
- this.getMapHeight = () => {//获取地图高度
+ this.getMapHeight = () => { //获取地图高度
var that = this;
this.mapId.css("height", (index, value) => {
- that.mapH = parseFloat(value);
- })
- // console.log(that.mapH, 'map位置');
+ that.mapH = parseFloat(value);
+ })
+ // console.log(that.mapH, 'map位置');
}
- this.changeDomPosition = (x, y, dy) => {//改变dom位置
+ this.changeDomPosition = (x, y, dy) => { //改变dom位置
var that = this;
// this.mapId.css("height", (index, value) => {//改变地图高度
// var h = this.mapH + y;
@@ -45,81 +45,86 @@
//begin
- this.followFinger = (map, state = 14) => {//(地图实例，dom状态判断是向上还是向下)
+ this.followFinger = (map, state = 14) => { //(地图实例，dom状态判断是向上还是向下)
// console.log('开始跟随手指');
var that = this;
- if(state != 14){
+ if (state != 14) {
that.state = state;
// console.log(that.state);
}
- that.getDomPosition();//获取dom位置
- that.getMapHeight();//获取地图高度
+ that.getDomPosition(); //获取dom位置
+ that.getMapHeight(); //获取地图高度
var once = true;
- that.div.on('touchmove', function (e) {//获取鼠标位置
+ that.div.on('touchmove', function(e) { //获取鼠标位置
e = e || window.event;
that.__xx = e.touches[0].clientX;
that.__yy = e.touches[0].clientY;
- if (once) {//获取第一次点击的位置
+ if (once) { //获取第一次点击的位置
once = false;
that.getMosePosition(that.__xx, that.__yy);
}
// console.log(that.__yy, '鼠标');
- var h = that.__yy - that.__sy//鼠标移动距离y
+ var h = that.__yy - that.__sy //鼠标移动距离y
- if (that.state == 'down') {//两种模式
+ if (that.state == 'down') { //两种模式
// console.log(that.state);
if (h >= 0 && h + that.__dy <= that.__wy - 20) {
- that.changeDomPosition(0, h, h + that.__dy);//改变位置
+ that.changeDomPosition(0, h, h + that.__dy); //改变位置
// console.log(that.state,h + that.__dy,112);
}
} else if (that.state == 'up') {
if (h >= -that.__dy && h <= that.__wy - 20) {
- that.changeDomPosition(0, h, h + that.__wy - 20);//改变位置
+ that.changeDomPosition(0, h, h + that.__wy - 20); //改变位置
// console.log(that.state,h + that.__wy - 20,112);
}
}
});
- that.div.on('touchend', function () {//抬起重置
- once = true;//抬起重置鼠标点击位置
- if (that.state == 'down') {//两种模式
- var chous = Math.abs(that.__yy - that.__sy) < that.__wy / 8;
+ that.div.on('touchend', function() { //抬起重置
+ once = true; //抬起重置鼠标点击位置
+ var chous = null;
+ if (that.state == 'down') { //两种模式
+ // var chous = Math.abs(that.__yy - that.__sy) < that.__wy / 4;
+ chous = (that.__sy - that.__yy) < 0;
} else if (that.state == 'up') {
- var chous = Math.abs(that.__yy - that.__sy) > that.__wy / 8;
+ // var chous = Math.abs(that.__yy - that.__sy) > that.__wy / 4;
+ chous = (that.__sy - that.__yy) < 0;
}
- if (chous) {
- that.changeDomPosition(0, 0, (parseFloat(that.__wy / 10) * 2.999));//改变位置
+ if (!chous) {
+ //改变dom位置
+ that.changeDomPosition(0, 0, (parseFloat(that.__wy / 10) * 3.999));
// that.getDomPosition();//抬起获取dom位置/持续停留使用
that.state = 'down';
- $('#map').css("height", (index, value) => {//改变地图高度
+ $('#map').css("height", (index, value) => { //改变地图高度
return '50%';
})
- map.invalidateSize(true);//应用地图高度
+ map.invalidateSize(true); //应用地图高度
} else {
- that.changeDomPosition(0, 0, that.__wy - 80);//改变位置
+ // that.changeDomPosition(0, 0, that.__wy - 50); //改变位置
+ that.changeDomPosition(0, 0, that.__wy); //改变位置
// that.getDomPosition();//抬起获取dom位置/持续停留使用
that.state = 'up';
- $('#map').css("height", (index, value) => {//改变地图高度
+ $('#map').css("height", (index, value) => { //改变地图高度
return '100%';
})
- map.invalidateSize(true);//应用地图高度
+ map.invalidateSize(true); //应用地图高度
}
- that.getMapHeight();//抬起获取map高度
+ that.getMapHeight(); //抬起获取map高度
});
}
- this.destruction = () => {//初始化销毁
+ this.destruction = () => { //初始化销毁
this.m = $(dom);
this.div = $(div);
this.mapId = $(map);
- this.__xx = null;//鼠标实时位置
+ this.__xx = null; //鼠标实时位置
this.__yy = null;
- this.__sx = null;//鼠标开始位置
+ this.__sx = null; //鼠标开始位置
this.__sy = null;
- this.__dx = null;//dom位置
+ this.__dx = null; //dom位置
this.__dy = null;
- this.mapH = null;//地图高度
- this.__wy = null;//屏幕高度
- this.state = "up";//dom状态默认up
+ this.mapH = null; //地图高度
+ this.__wy = null; //屏幕高度
+ this.state = "up"; //dom状态默认up
this.div.off();
}
}
diff --git a/xcxMapJQ/js/vueMain.js b/xcxMapJQ/js/vueMain.js
index baded5a..03c54ad 100644
--- a/xcxMapJQ/js/vueMain.js
+++ b/xcxMapJQ/js/vueMain.js
@@ -1,29 +1,25 @@
var me = new Vue({
el: '#mapVue',
data: {
- map: null,//map
+ map: null, //map
getdata: null,
marker: null,
layuiLayer: null,
nowIndex: null,
-
- LXdhStart: null,
- LXdhEnd: null,
- LxdhLine: null,
+
+ LXdhStart: null,
+ LXdhEnd: null,
+ LxdhLine: null,
activeName: 'first',
- move: null,//存放移动实例
-
- //存放实时坐标
- lat: "",
- lng: "",
-
+ move: null, //存放移动实例
+ //存放实时坐标
+ lat: "",
+ lng: "",
seedata: '',
-
nowPosition: '',
-
shipingPopupShow: false,
shipingM3u8Url: '',
resultFeedbackPopupShow: false,
@@ -32,60 +28,42 @@
methods: {
getDataList() {
var that = this;
- // var url = 'https://web.byisf.com/api/blade-jfpts/equipment/equipment/listAll';
- // axios.get(url).then((res) => {
- // that.getdata = res.data.data;
- // console.log(that.getdata)
- that.beginCome();
- // })
+ that.beginCome();
},
beginCome() {
var data = [{
- "id": '100000',
- "place": '无数据',
- "state": '0',
- "dtype": '0',
- "size": '300',
- "jd": "115.822311",
- "wd": "28.646341"
- }]
- this.getdata = this.getQueryVariable('data') || data;//url解码
- console.log(this.getdata)
- // this.getdata = [{
- // jd: 115.91042800000002,
- // wd: 28.68094757898212,
- // state: 0,
- // dtype: 0,
- // size: 300,
- // title: '第一个'
- // }];//url解码
- this.map = this.beginMap(this.map, this.getdata);//创建并接受map
+ "id": '100000',
+ "place": '无数据',
+ "state": '0',
+ "dtype": '0',
+ "size": '300',
+ "jd": "115.822311",
+ "wd": "28.646341"
+ }]
+ //url解码
+ this.getdata = this.getQueryVariable('data') || data;
+ this.map = this.beginMap(this.map, this.getdata); //创建并接受map
this.move = new myDomMove('#seedata', '.title', '#map');
- // var dy = document.documentElement.clientHeight - 50;
- // $('#seedata').animate({ top: dy + "px" }, 10);
- // $('#map').css("height", (index, value) => {//改变地图高度
- // return '100%';
- // // })
- this.map.invalidateSize(true);//应用地图高度
+ this.map.invalidateSize(true); //应用地图高度
this.move.followFinger(this.map, 'down');
},
+ //url解码
getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
- if (pair[0] == variable) { return JSON.parse(decodeURI(pair[1])); }//解码url 和 JSON
+ if (pair[0] == variable) { return JSON.parse(decodeURI(pair[1])); } //解码url 和 JSON
}
return (false);
},
beginMap(map, data) {
var that = this,
center = [data[0].wd, data[0].jd],
- url = `/api/blade-jfpts/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
- // console.log(center)
+ url = `http://s16s652780.51mypc.cn/api/blade-jfpts/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
+ // url = `http://localhost:89/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
this.nowPosition = center;
axios.post(url).then((res) => {
- // console.log(res)
if (res.data.data.length != 0) {
var dat = res.data.data[0];
for (var key in dat) {
@@ -98,14 +76,12 @@
} else {
this.seedata = data[0];
}
- // console.log(this.seedata, 1524545453)
})
-
var createMap = () => {
map = L.map('map', { //初始化地图
center: center,
- zoom: 12,
+ zoom: 20,
minZoom: 2,
maxZoom: 17,
attributionControl: false, //去掉右下角
@@ -113,12 +89,8 @@
});
L.tileLayer( //添加切片图层
// "https://webmap-tile.sf-express.com/MapTileService/rt?x={x}&y={y}&z={z}", {//顺丰地图
- "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", {//顺丰地图
- // "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {
-
- // subdomains: ["1", "2", "3", "4"],
- // attribution: "高德"
- }
+ "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", { //顺丰地图
+ }
).addTo(map);
}
createMap();
@@ -127,218 +99,151 @@
var transportIcon = L.Icon.extend({ //图标初始化
options: {
iconSize: [30, 30], // 图标尺寸
- // iconAnchor: [30, 30], // 图标偏移量
- // popupAnchor: [-20, -20] // 弹出框偏移量
}
});
var carIcon = new transportIcon({ //引入图标
- iconUrl: './img/gray.png'
- }),
+ iconUrl: './img/gray.png'
+ }),
planeIcon = new transportIcon({
iconUrl: './img/green.png'
}),
busIcon = new transportIcon({
iconUrl: './img/red.png'
});
- // console.log(data, 43545343)
- var setData = (a) => {//定义图标
+ var setData = (a) => { //定义图标
marker = L.marker([a.wd, a.jd], {
- icon: planeIcon,
+ icon: planeIcon,
// icon: a.dtype == 0 ? carIcon : a.dtype == 1 ? planeIcon : a.dtype == 2 ? busIcon : '',
// title: title,
- myData: {//自定义数据
+ myData: { //自定义数据
...a
}
});
}
for (var i = 0; i < data.length; i++) {
var a = data[i];
- // var title = a.title;
- // if (a.dtype == 0) {
- // setData(a);
- // } else if (a.dtype == 1) {
- // setData(a);
- // } else if (a.dtype == 2) {
- // setData(a);
- // }
if (a.jd == '' || a.wd == '') {
console.log('没有坐标', i)
} else {
setData(a);
- that.getDHLine(a.jd,a.wd);
+ that.getDHLine(a.jd, a.wd);
}
- // marker.bindPopup(title);
markers.addLayer(marker);
}
map.addLayer(markers);
- markers.on('click', function (a) {
+ markers.on('click', function(a) {
// that.drawer = true;
that.seedata = a.layer.options.myData;
- that.nowPosition = [that.seedata.wd,that.seedata.jd]
- console.log(that.seedata)
+ that.nowPosition = [that.seedata.wd, that.seedata.jd]
$('#seedata').css('top', '');
- $('#map').css("height", (index, value) => {//改变地图高度
+ $('#map').css("height", (index, value) => { //改变地图高度
return '50%';
})
- map.invalidateSize(true);//应用地图高度
- // console.log(a.layer.options.myData);
+ map.invalidateSize(true); //应用地图高度
that.move.destruction();
that.move.followFinger(map, 'down');
});
- // that.seedata = data[0];
this.nowPosition = center;
- // map.on('mousemove', (e) => {//实时显示坐标
- // let latlng = e.latlng;
- // console.log(latlng);// {lat: 30.59, lng: 114.32}
- // });
- return map;//抛出map
+ return map; //抛出map
},
- getDHLine(x, y) {
-
- var that = this;
-
- //获取导航信息
- axios({
- method: "get",
- url: `https://web.byisf.com/sf/rp/v2/api`,
- params: {
- ak: "1986afc8a5744263971b7f2482253dfc",
- x1: that.lng,
- y1: that.lat,
- x2: x,
- y2: y,
- type: "1",
- strategy: "0",
- opt: "sf2"
- },
- }).then((res) => {
- var resdata = res.data.result.coords;
- var data = [];
- for (var i = 0; i < resdata.length; i++) {
- var xy = [];
- xy.push(resdata[i][1]);
- xy.push(resdata[i][0]);
- data.push(xy);
- }
-
- if (that.LXdhEnd != null) {
- that.map.removeLayer(that.LXdhEnd);
- }
- if (that.LxdhLine != null) {
- that.map.removeLayer(that.LxdhLine);
- }
-
- //绘制起点和终点
- that.LXdhEnd = L.markerClusterGroup();
-
- var transportIcon = L.Icon.extend({ //图标初始化
- options: {
- iconSize: [56, 32], // 图标尺寸
- }
- });
-
- var zd = new transportIcon({
- iconUrl: './img/zd.png'
- });
- // var qd = new transportIcon({
- // iconUrl: './img/qd.png'
- // });
-
- var qdzb = res.data.result.query;
-
- var x = resdata[resdata.length - 1][0];
- var y = resdata[resdata.length - 1][1];
-
- that.LXdhEnd.addLayer(L.marker([y, x], {
- icon: zd,
- }));
- // markers.addLayer(L.marker([qdzb.start.y, qdzb.start.x], {
- // icon: qd,
- // }));
-
- that.map.addLayer(that.LXdhEnd);
-
- that.showPolyLine(data);
- });
- },
- showPolyLine(xy) {
- var that = this;
- that.LxdhLine = L.polyline(xy, {
- color: 'red'
- }).addTo(that.map);
-
- // zoom the map to the polyline
- that.map.fitBounds(that.LxdhLine.getBounds())
- },
- getLocation() {
- // if (navigator.geolocation) {
- // // console.log(navigator.geolocation)
- // navigator.geolocation.getCurrentPosition(onSuccess, onError);
-
- // } else {
- // alert("您的浏览器不支持使用HTML 5来获取地理位置服务");
- // }
+ getDHLine(x, y) {
- // function onSuccess(position) {
- // console.log('纬度: ' + position.coords.latitude + '\n' +
- // '经度: ' + position.coords.longitude + '\n' +
- // '海拔: ' + position.coords.altitude + '\n' +
- // '水平精度: ' + position.coords.accuracy + '\n' +
- // '垂直精度: ' + position.coords.altitudeAccura)
- // }
- // function onError(error) {
- // switch (error.code) {
- // case error.PERMISSION_DENIED:
- // alert("您拒绝对获取地理位置的请求");
- // break;
- // case error.POSITION_UNAVAILABLE:
- // alert("位置信息是不可用的");
- // break;
- // case error.TIMEOUT:
- // alert("请求您的地理位置超时");
- // break;
- // case error.UNKNOWN_ERROR:
- // alert("未知错误");
- // break;
- // }
- // }
- // this.map.locate({
- // setView: true,
- // maxZoom: 16
- // });
- // console.log(this.map)
- // this.map.on('locationfound', function (e) {
- // // var radius = e.accuracy / 2;
- // // L.marker(e.latlng).addTo(mapid).bindPopup("你就在这个圈内");
- // // L.circle(e.latlng, radius).addTo(mapid);
- // console.log(e)
- // });
+ var that = this;
+
+ //获取导航信息
+ axios({
+ method: "get",
+ url: `https://web.byisf.com/sf/rp/v2/api`,
+ params: {
+ ak: "1986afc8a5744263971b7f2482253dfc",
+ x1: that.lng,
+ y1: that.lat,
+ x2: x,
+ y2: y,
+ type: "1",
+ strategy: "0",
+ opt: "sf2"
+ },
+ }).then((res) => {
+ var resdata = res.data.result.coords;
+ var data = [];
+ for (var i = 0; i < resdata.length; i++) {
+ var xy = [];
+ xy.push(resdata[i][1]);
+ xy.push(resdata[i][0]);
+ data.push(xy);
+ }
+
+ if (that.LXdhEnd != null) {
+ that.map.removeLayer(that.LXdhEnd);
+ }
+ if (that.LxdhLine != null) {
+ that.map.removeLayer(that.LxdhLine);
+ }
+
+ //绘制起点和终点
+ that.LXdhEnd = L.markerClusterGroup();
+
+ var transportIcon = L.Icon.extend({ //图标初始化
+ options: {
+ iconSize: [56, 32], // 图标尺寸
+ }
+ });
+
+ var zd = new transportIcon({
+ iconUrl: './img/zd.png'
+ });
+ // var qd = new transportIcon({
+ // iconUrl: './img/qd.png'
+ // });
+
+ var qdzb = res.data.result.query;
+
+ var x = resdata[resdata.length - 1][0];
+ var y = resdata[resdata.length - 1][1];
+
+ that.LXdhEnd.addLayer(L.marker([y, x], {
+ icon: zd,
+ }));
+ // markers.addLayer(L.marker([qdzb.start.y, qdzb.start.x], {
+ // icon: qd,
+ // }));
+
+ that.map.addLayer(that.LXdhEnd);
+
+ that.showPolyLine(data);
+ });
},
- handleClick(tab, event) {
- // console.log(tab, event);
+ showPolyLine(xy) {
+ var that = this;
+ that.LxdhLine = L.polyline(xy, {
+ color: 'red'
+ }).addTo(that.map);
+
+ // zoom the map to the polyline
+ that.map.fitBounds(that.LxdhLine.getBounds())
},
- titleClick(){
- this.map.setView(this.nowPosition, 12);
+ //定位警情位置
+ titleClick() {
+ this.map.setView(this.nowPosition, 20);
},
- locationMap() {//定位
- // this.map.setView(this.nowPosition, 12);//定警情位置
- // this.getLocation();
- // console.log(wx,12);
- // wx.miniProgram.navigateTo({url: 'pages/workbench/workbench'})
+ //定位当前位置
+ locationMap() {
+ this.map.setView([this.lat, this.lng], 20);
},
- shipingClick(open) {//打开视频
+ shipingClick(open) { //打开视频
if (open) {
this.openRealVideoBox(this.seedata.serialNumber, this.seedata.channelNumber, this.seedata.deviceNumber, this.seedata.manufacturer);
} else {
this.shipingPopupShow = false;
}
},
- resultFeedbackClick() {//结果反馈跳转小程序
+ resultFeedbackClick() { //结果反馈跳转小程序
this.gotoxcx('policeDetails');
},
- openRealVideoBox(serialNumber, channelNumber, deviceNumber, manufacturer) {//获取视频地址
+ openRealVideoBox(serialNumber, channelNumber, deviceNumber, manufacturer) { //获取视频地址
var that = this;
if (manufacturer == "HK") {
axios
@@ -361,9 +266,7 @@
});
newAxios
.post(
- "/api_control",
- {},
- {
+ "/api_control", {}, {
params: {
param: JSON.stringify({ PktType: "GetAccessToken" }),
},
@@ -387,67 +290,65 @@
},
gotoxcx(routs) {
wx.miniProgram.navigateTo({
- url: `../poput/workbench/policeDetails/${routs}?id=${this.seedata.id}`, //指定跳转至小程序页面的门路
- success: function () {
- console.log('success'); //页面跳转胜利的回调函数
+ url: `../poput/workbench/policeDetails/${routs}?id=${this.seedata.id}`, //指定跳转至小程序页面的门路
+ success: function() {
+ console.log('success'); //页面跳转胜利的回调函数
}
});
},
- getLocationData() {
- var that = this;
- var geolocation = new qq.maps.Geolocation("T7RBZ-62U3X-RSQ4P-ZZVCB-WE7JT-HRBOG", "mapqq");
- var positionNum = 0;
- var options = {
- timeout: 8000
- };
-
- function showPosition(position) {
- var adCode = position.adCode; //邮政编码
- var nation = position.nation; //中国
- var city = position.city; //城市
- var addr = position.addr; //详细地址
- that.lat = position.lat; //
- that.lng = position.lng; //火星坐标 //TODO 实现业务代码逻辑
-
- if (that.LXdhStart != null) {
- that.map.removeLayer(that.LXdhStart);
- }
-
- //绘制起点和终点
- that.LXdhStart = L.markerClusterGroup();
-
- var transportIcon = L.Icon.extend({ //图标初始化
- options: {
- iconSize: [50, 50], // 图标尺寸
- }
- });
-
- var qd = new transportIcon({
- iconUrl: './img/dingw.gif'
- });
-
- that.LXdhStart.addLayer(L.marker([that.lat, that.lng], {
- icon: qd,
- }));
-
- that.map.addLayer(that.LXdhStart);
-
- };
-
- function showErr() {
- //TODO 如果出错了调用此方法
- };
-
- geolocation.getLocation(showPosition, showErr, options);
- },
+ getLocationData() {
+ var that = this;
+ var geolocation = new qq.maps.Geolocation("T7RBZ-62U3X-RSQ4P-ZZVCB-WE7JT-HRBOG", "mapqq");
+ var positionNum = 0;
+ var options = {
+ timeout: 8000
+ };
+
+ function showPosition(position) {
+ var adCode = position.adCode; //邮政编码
+ var nation = position.nation; //中国
+ var city = position.city; //城市
+ var addr = position.addr; //详细地址
+ that.lat = position.lat; //
+ that.lng = position.lng; //火星坐标 //TODO 实现业务代码逻辑
+
+ if (that.LXdhStart != null) {
+ that.map.removeLayer(that.LXdhStart);
+ }
+
+ //绘制起点和终点
+ that.LXdhStart = L.markerClusterGroup();
+
+ var transportIcon = L.Icon.extend({ //图标初始化
+ options: {
+ iconSize: [50, 50], // 图标尺寸
+ }
+ });
+
+ var qd = new transportIcon({
+ iconUrl: './img/dingw.gif'
+ });
+
+ that.LXdhStart.addLayer(L.marker([that.lat, that.lng], {
+ icon: qd,
+ }));
+
+ that.map.addLayer(that.LXdhStart);
+
+ };
+
+ function showErr() {
+ //TODO 如果出错了调用此方法
+ };
+
+ geolocation.getLocation(showPosition, showErr, options);
+ },
},
- created() {
- },
+ created() {},
mounted() {
this.getDataList();
- this.getLocationData();
+ this.getLocationData();
},
- wacth: {
- }
+ wacth: {}
})
\ No newline at end of file
diff --git a/xcxMapJQ/xcxmap.html b/xcxMapJQ/xcxmap.html
index e168067..102043d 100644
--- a/xcxMapJQ/xcxmap.html
+++ b/xcxMapJQ/xcxmap.html
@@ -2,143 +2,135 @@
<html>
<head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
- <title>地图</title>
- <!-- vue -->
- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+ <title>地图</title>
+ <!-- vue -->
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
- <!-- leaflet支持 -->
- <script src="./lid/leaflet.js"></script>
- <link rel="stylesheet" href="./lid/leaflet.css" />
+ <!-- leaflet支持 -->
+ <script src="./lid/leaflet.js"></script>
+ <link rel="stylesheet" href="./lid/leaflet.css" />
- <!-- leaflet聚合支持 -->
- <link rel="stylesheet" href="./lid/MarkerCluster.css" />
- <link rel="stylesheet" href="./lid/MarkerCluster.Default.css" />
- <script src="./lid/leaflet.markercluster-src.js"></script>
+ <!-- leaflet聚合支持 -->
+ <link rel="stylesheet" href="./lid/MarkerCluster.css" />
+ <link rel="stylesheet" href="./lid/MarkerCluster.Default.css" />
+ <script src="./lid/leaflet.markercluster-src.js"></script>
- <!-- layui支持 -->
- <!-- <link rel="stylesheet" href="../map/lib/layui/css/layui.css" media="all"> -->
- <!-- <script src="../map/lib/layui/layui.js" charset="utf-8"></script> -->
-
- <!-- 百度地图api -->
- <script type="text/javascript" src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
+ <!-- layui支持 -->
+ <!-- <link rel="stylesheet" href="../map/lib/layui/css/layui.css" media="all"> -->
+ <!-- <script src="../map/lib/layui/layui.js" charset="utf-8"></script> -->
- <!-- axios支持 -->
- <script src="../map/lib/axios.js"></script>
+ <!-- 百度地图api -->
+ <script type="text/javascript" src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
- <!-- elementui -->
- <script src="../map/lib/elementUi.js"></script>
- <!-- <link rel="stylesheet" href="../map/lib/elementUi.css"> -->
- <link rel="stylesheet" href="./css/elementUI.css">
- <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
+ <!-- axios支持 -->
+ <script src="../map/lib/axios.js"></script>
- <!-- jqurey -->
- <script src="../map/lib/jquery.js" charset="utf-8"></script>
+ <!-- elementui -->
+ <script src="../map/lib/elementUi.js"></script>
+ <!-- <link rel="stylesheet" href="../map/lib/elementUi.css"> -->
+ <link rel="stylesheet" href="./css/elementUI.css">
+ <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
- <!-- 微信支持 -->
- <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
- <!-- <script src="./js/wx.js"></script> -->
+ <!-- jqurey -->
+ <script src="../map/lib/jquery.js" charset="utf-8"></script>
- <!-- omyself支持 -->
- <link rel="stylesheet" href="./css/body.css" />
+ <!-- 微信支持 -->
+ <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
+ <!-- <script src="./js/wx.js"></script> -->
- <!-- myDomMove -->
- <script src="./js/move.js"></script>
- <!-- sha1加密 -->
- <!-- <script src="./js/sha1.js"></script> -->
- <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
+ <!-- omyself支持 -->
+ <link rel="stylesheet" href="./css/body.css" />
+
+ <!-- myDomMove -->
+ <script src="./js/move.js"></script>
+ <!-- sha1加密 -->
+ <!-- <script src="./js/sha1.js"></script> -->
+ <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
</head>
<body>
- <div id="mapVue">
- <div class="dingwei" @click="locationMap">
- <img style="width: 80%;height: 80%;" src="./img/dingwei.png" alt="">
- </div>
- <div id="map"></div>
- <div id="seedata">
- <div class="title" @click="titleClick">
- {{seedata.deviceName}}
- <div class="title-span"> </div>
- {{seedata.deviceNumber}}
- <div class="title-span"> </div>
- <div class="title-span"> </div>
- </div>
- <div class="main">
- <div class="f-m-once">
- <div class="f-m-o-title">
- <img class="f-m-o-t-img" src="./img/shiyongren.png" alt="">
- 使用方:
- </div>
- <div class="f-m-o-center">{{seedata.deptName}}</div>
- </div>
- <div class="f-m-once">
- <div class="f-m-o-title">
- <img class="f-m-o-t-img" src="./img/ren.png" alt="">
- 接警人:
- </div>
- <div class="f-m-o-center">{{seedata.alarmPeople}}</div>
- </div>
- <div class="f-m-once">
- <div class="f-m-o-title">
- <img class="f-m-o-t-img" src="./img/dianhua.png" alt="">
- 联系电话:
- </div>
- <div class="f-m-o-center">{{seedata.phoneNumber}}</div>
- </div>
- <el-divider></el-divider>
- <div class="f-m-once">
- <div class="f-m-o-title">
- <img class="f-m-o-t-img" src="./img/shijian.png" alt="">
- 报警时间:
- </div>
- <div class="f-m-o-center">{{seedata.alarmTime}}</div>
- </div>
- <div class="f-m-once">
- <div class="f-m-o-title">
- <img class="f-m-o-t-img" src="./img/leixing.png" alt="">
- 报警类型:
- </div>
- <div class="f-m-o-center">{{seedata.alarmType}}</div>
- </div>
- <el-divider></el-divider>
- <div class="f-m-once">
- <div class="f-m-o-title">
- <img class="f-m-o-t-img" src="./img/beizhu.png" alt="">
- 备注:
- </div>
- <div class="f-m-o-center">{{seedata.bz}}</div>
- </div>
- <div class="but">
- <div class="buta" @click="shipingClick(true)">
- <img class="b-b-img" src="./img/shiping.png" alt="">
- </div>
- <!-- 加上display： none不会闪烁 -->
- <div class="shipingPopup" v-show="shipingPopupShow" style="display: none;">
- <div class="s-p-main">
- <div @click="shipingClick(false)">
- <img src="./img/gaunbi.png" alt="" class="s-p-gaunbi">
- </div>
- <!-- <video style="height: 550px; width: 100%" controls="controls"
- id="real_video_shipingPopup" src=""></video> -->
- <video style="height: 550px; width: 100%" controls="controls" :src="shipingM3u8Url"></video>
- </div>
- </div>
- <div class="butb" @click="resultFeedbackClick">结果反馈</div>
+ <div id="mapVue">
+ <div class="dingwei" @click="locationMap">
+ <img style="width: 80%;height: 80%;" src="./img/dingwei.png" alt="">
+ </div>
+ <div id="map">
+ <div class="title" @click="titleClick">
+ <span class="device-name">{{seedata.deviceName}}</span>
+ <span class="device-number">{{seedata.deviceNumber}}</span>
+ </div>
+ </div>
+ <div id="seedata">
+ <div class="main">
+ <div class="div-alarm-people">
+ <div class="f-m-once">
+ <img class="f-m-o-t-img" src="./img/ren.png" alt="">
+ <div class="f-m-o-title">接警人</div>
+ <div class="f-m-o-center">{{seedata.alarmPeople}}</div>
+ </div>
+ <div class="f-m-once-phone-number">
+ <img class="f-m-o-t-img" src="./img/dianhua.png" alt="">
+ <div class="f-m-o-title">联系电话</div>
+ <div class="f-m-o-center">{{seedata.phoneNumber}}</div>
+ </div>
+ </div>
- <div class="butc">
- <img class="b-b-img" src="./img/huifang.png" alt="">
- <!-- <div class="huifangPopup">
+ <div class="interval"></div>
+
+ <div class="div-alarm-people">
+ <div class="f-m-once">
+ <img class="f-m-o-t-img" src="./img/shijian.png" alt="">
+ <div class="f-m-o-title">报警时间</div>
+ <div class="f-m-o-center">{{seedata.alarmTime}}</div>
+ </div>
+ <div class="f-m-once-alarm-type">
+ <img class="f-m-o-t-img" src="./img/leixing.png" alt="">
+ <div class="f-m-o-title">报警类型</div>
+ <div class="f-m-o-center">{{seedata.alarmType}}</div>
+ </div>
+ </div>
+ <div class="interval"></div>
+
+ <div class="div-alarm-people">
+ <div class="f-m-once-desc">
+ <img class="f-m-o-t-img-desc" src="./img/beizhu.png" alt="">
+ <div class="f-m-o-title-desc">备注</div>
+ <div class="f-m-o-center-desc">{{seedata.bz}}</div>
+ </div>
+ </div>
+
+ <div class="interval"></div>
+ <div class="but">
+ <div class="buta" @click="shipingClick(true)">
+ <img class="b-b-img" src="./img/shiping.png" alt="">
+ </div>
+ <!-- 加上display： none不会闪烁 -->
+ <div class="shipingPopup" v-show="shipingPopupShow" style="display: none;">
+ <div class="s-p-main">
+ <div @click="shipingClick(false)">
+ <img src="./img/gaunbi.png" alt="" class="s-p-gaunbi">
+ </div>
+ <!-- <video style="height: 550px; width: 100%" controls="controls"
+ id="real_video_shipingPopup" src=""></video> -->
+ <video style="height: 550px; width: 100%" controls="controls" :src="shipingM3u8Url"></video>
+ </div>
+ </div>
+ <div class="butb" @click="resultFeedbackClick">结果反馈</div>
+
+ <div class="butc">
+ <img class="b-b-img" src="./img/huifang.png" alt="">
+ <!-- <div class="huifangPopup">
回放
</div> -->
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- vue渲染 -->
- <script src="./js/vueMain.js"></script>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- vue渲染 -->
+ <script src="./js/vueMain.js"></script>
</body>
</html>
\ No newline at end of file
diff --git a/xcxjingqingmap_patrol/js/move.js b/xcxjingqingmap_patrol/js/move.js
index 510ece3..13953e4 100644
--- a/xcxjingqingmap_patrol/js/move.js
+++ b/xcxjingqingmap_patrol/js/move.js
@@ -82,8 +82,6 @@
});
that.div.on('touchend', function() { //抬起重置
console.log("触摸停止")
- console.log(that.__yy, 123)
- console.log(that.__sy, 124)
once = true; //抬起重置鼠标点击位置
var chous = null;
if (that.state == 'down') { //两种模式
--
Gitblit v1.9.3