From 08263c2c6a67332f3aaa7658aa0a966e2f14e1da Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Fri, 28 May 2021 14:07:26 +0800
Subject: [PATCH] 路线导航修改
---
xcxjingqingmap/lxdhmap.html | 62 +++++++++++++++
xcxjingqingmap/js/lxdhmap.js | 157 +++++++++++++++++++++-----------------
2 files changed, 146 insertions(+), 73 deletions(-)
diff --git a/xcxjingqingmap/js/lxdhmap.js b/xcxjingqingmap/js/lxdhmap.js
index 58d0e06..3d05750 100644
--- a/xcxjingqingmap/js/lxdhmap.js
+++ b/xcxjingqingmap/js/lxdhmap.js
@@ -12,7 +12,7 @@
mh_query_show: true,
ZBCXresult: null,
-
+
LXdhEnd: null,
LxdhLine: null,
@@ -56,7 +56,7 @@
// return '100%';
// // })
this.map.invalidateSize(true); //应用地图高度
- this.move.followFinger(this.map, 'down');
+ //this.move.followFinger(this.map, 'down');
},
getQueryVariable(variable) {
var query = window.location.search.substring(1);
@@ -164,15 +164,15 @@
markers.on('click', function(a) {
// that.drawer = true;
- // that.seedata = a.layer.options.myData;
+ that.seedata = a.layer.options.myData;
$('#seedata').css('top', '');
$('#map').css("height", (index, value) => { //改变地图高度
- return '50%';
+ return '45%';
})
map.invalidateSize(true); //应用地图高度
// console.log(a.layer.options.myData);
- that.move.destruction();
- that.move.followFinger(map, 'down');
+ //that.move.destruction();
+ //that.move.followFinger(map, 'down');
});
that.seedata = data[0];
@@ -193,6 +193,16 @@
console.log('success'); //页面跳转胜利的回调函数
}
});
+ },
+ LXdhJQ() {
+ var that = this;
+ var jqdata = that.seedata;
+ that.getDHLine(jqdata.jd,jqdata.wd);
+
+ $('#map').css("height", (index, value) => { //改变地图高度
+ return '100%';
+ })
+ this.map.invalidateSize(true); //应用地图高度
},
lxdhSearch() {
//var id = this.$store.state.puserID;
@@ -233,78 +243,83 @@
var ids = $(this).attr("id");
$("#mh_query").html("");
+
+ that.getDHLine(that.ZBCXresult[ids].location.lng,that.ZBCXresult[ids].location.lat);
// alert(that.ZBCXresult[ids].name);
- //获取导航信息
- axios({
- method: "get",
- url: `https://web.byisf.com/sf/rp/v2/api`,
- params: {
- ak: "1986afc8a5744263971b7f2482253dfc",
- x1: "114.95675749182703",
- y1: "25.84163062532512",
- x2: that.ZBCXresult[ids].location.lng,
- y2: that.ZBCXresult[ids].location.lat,
- 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);
- });
-
});
});
this.mh_query_show = true;
},
+ getDHLine(x,y){
+
+ var that = this;
+
+ //获取导航信息
+ axios({
+ method: "get",
+ url: `https://web.byisf.com/sf/rp/v2/api`,
+ params: {
+ ak: "1986afc8a5744263971b7f2482253dfc",
+ x1: "114.95675749182703",
+ y1: "25.84163062532512",
+ 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;
var latlngs = [
diff --git a/xcxjingqingmap/lxdhmap.html b/xcxjingqingmap/lxdhmap.html
index b1519eb..e3c1276 100644
--- a/xcxjingqingmap/lxdhmap.html
+++ b/xcxjingqingmap/lxdhmap.html
@@ -52,7 +52,6 @@
<div id="mapVue">
<div id="map"></div>
-
<div class="lxdh_input_div">
<input id="lxdh_input" v-model="searchValue" type="text">
@@ -64,9 +63,68 @@
<div id="mh_query" v-if="mh_query_show">
</div>
-
</div>
+ <div id="seedata">
+ <div class="title">
+ {{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/ren.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="butb" @click="LXdhJQ">路线导航</div>
+ </div>
+ </div>
+ </div>
+
+ </div>
<!-- vue渲染 -->
--
Gitblit v1.9.3