first commit
This commit is contained in:
639
pages/index/index.vue
Normal file
639
pages/index/index.vue
Normal file
@@ -0,0 +1,639 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="isBack" title="经纬度拾取">
|
||||
|
||||
</u-navbar>
|
||||
<map style="width: 100vw; height: 40vh;" id="maps" class="map" :show-location="true"
|
||||
:enable-satellite="satellite" :theme="theme" :scale="scale" :markers="markers" @regionchange="regionchange"
|
||||
@tap="tapAction"></map>
|
||||
<view class="selectPointPosition">
|
||||
<view>已选位置:</view>
|
||||
<view>经度：{{longitude}}纬度：{{latitude}}</view>
|
||||
</view>
|
||||
<view class="cameraInfo">
|
||||
<view class="btnListBox">
|
||||
<view>操作:</view>
|
||||
<u-icon name="map-fill" size="56" @click="reGetLocation()" style="margin-right: 20rpx;"></u-icon>
|
||||
</view>
|
||||
<u-section title="已选择设备" :sub-title="cameara.number==null?'请选择':cameara.number"
|
||||
@click="goToSelectCamera()"></u-section>
|
||||
<view class="cameraItem" v-if="cameara.number!=null">
|
||||
<view class="editItem">
|
||||
<view class="editItemBtn" @click="goToEdit()">
|
||||
<u-icon name="edit-pen" size="36" style="margin-right: 20rpx;"></u-icon>
|
||||
<text>编辑其它信息</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cameraItemLi">
|
||||
<view>设备编码：</view>
|
||||
<view>{{cameara.number}}</view>
|
||||
</view>
|
||||
<view class="cameraItemLi">
|
||||
<view>设备类型：</view>
|
||||
<view>{{cameara.type}}</view>
|
||||
</view>
|
||||
<view class="cameraItemLi">
|
||||
<view>纬度：</view>
|
||||
<view v-if="cameara.latitude">{{cameara.latitude}}</view>
|
||||
<view class="unKnow" v-if="!cameara.latitude">空</view>
|
||||
</view>
|
||||
<view class="cameraItemLi">
|
||||
<view>经度：</view>
|
||||
<view v-if="cameara.longitude">{{cameara.longitude}}</view>
|
||||
<view class="unKnow" v-if="!cameara.longitude">空</view>
|
||||
</view>
|
||||
<view class="btnList">
|
||||
<u-button size="mini" class="btn" type="info" @click="moveTo(10000)">聚焦历史点位</u-button>
|
||||
<u-button size="mini" class="btn" type="info" @click="moveTo(100)">聚焦手选位置</u-button>
|
||||
<u-button size="mini" class="btn" type="info" @click="moveTo(1)">聚焦当前位置</u-button>
|
||||
</view>
|
||||
<view class="btnList1">
|
||||
<u-button size="mini" type="primary" class="btn" @click="updateAction(0)">设置黑色点为当前设备位置</u-button>
|
||||
<u-button size="mini" type="primary" class="btn" @click="updateAction(1)">设置红色点为当前设备位置</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tipsList">
|
||||
<view>注：</view>
|
||||
<view>黑色图标为用户当前位置</view>
|
||||
<view>红色图标为用户手动选中位置（点击地图可以收到选择）</view>
|
||||
<view>黄色图标为设备旧位置</view>
|
||||
</view>
|
||||
<view v-for="item in logs">
|
||||
{{item}}
|
||||
</view>
|
||||
<u-popup v-model="leftModelShow">
|
||||
<u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
|
||||
<view>出淤泥而不染，濯清涟而不妖</view>
|
||||
</u-popup>
|
||||
<u-action-sheet :list="list" v-model="showActionList"></u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from "dayjs"
|
||||
import config from "../../libs/config/config.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
theme: 'satellite',
|
||||
satellite: true,
|
||||
isBack: false,
|
||||
leftModelShow: false,
|
||||
latitude: "", // 默认定在首都
|
||||
longitude: "",
|
||||
scale: 16, // 默认16
|
||||
markers: [],
|
||||
markerHeight: 30,
|
||||
timer: null,
|
||||
logs: [],
|
||||
keyword: '',
|
||||
accuracy: '', //位置的精确度
|
||||
altitude: '', //高度，单位 m
|
||||
horizontalAccuracy: '', //水平精度，单位 m
|
||||
cameara: {
|
||||
id: "",
|
||||
camera_name: "",
|
||||
camera_code: "",
|
||||
longitude: "",
|
||||
latitude: "",
|
||||
images: "",
|
||||
remarks: "",
|
||||
type: "",
|
||||
},
|
||||
showActionList: false,
|
||||
list: [{
|
||||
text: '点赞',
|
||||
color: 'blue',
|
||||
fontSize: 28,
|
||||
subText: '感谢您的点赞'
|
||||
}, {
|
||||
text: '分享'
|
||||
}, {
|
||||
text: '评论'
|
||||
}],
|
||||
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
const returnedTarget = Object.assign(this.$store.state.equip.currentData, this.$store.state.equip.currentDataDetails);
|
||||
this.cameara=returnedTarget
|
||||
this.$store.dispatch('queryCurrentDataDetails', {})
|
||||
},
|
||||
onReady() {
|
||||
this._mapContext = uni.createMapContext("maps", this);
|
||||
this.timer = setInterval(() => {
|
||||
//this.getLocationInfo()
|
||||
}, 2000)
|
||||
this.getLocationInfo()
|
||||
//this.bindMapClickAction();
|
||||
// this.addMarkers();
|
||||
},
|
||||
methods: {
|
||||
tapAction(e) {
|
||||
console.log(e)
|
||||
let point = e.detail;
|
||||
point.iconPath = '../../static/address_2.png';
|
||||
point.id = 100
|
||||
|
||||
|
||||
|
||||
this.latitude = point.latitude;
|
||||
this.longitude = point.longitude;
|
||||
|
||||
this._mapContext.moveToLocation({
|
||||
latitude: point.latitude,
|
||||
longitude: point.longitude,
|
||||
})
|
||||
|
||||
let list = JSON.parse(JSON.stringify(this.markers));
|
||||
|
||||
let isFrist = 0;
|
||||
|
||||
list.forEach(function(item) {
|
||||
if (item.id == 100) {
|
||||
isFrist = 1;
|
||||
item.latitude = point.latitude;
|
||||
item.longitude = point.longitude;
|
||||
} else {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
if (isFrist == 0) {
|
||||
this.markers = this.markers.concat(point);
|
||||
} else {
|
||||
this.markers = list;
|
||||
}
|
||||
|
||||
},
|
||||
bindMapClickAction() {
|
||||
var that = this;
|
||||
var maps = this._mapContext.$getAppMap();
|
||||
maps.onclick = function(point) {
|
||||
console.log(point);
|
||||
|
||||
point.iconPath = '../../static/address_2.png';
|
||||
point.id = 100
|
||||
|
||||
that.latitude = point.latitude;
|
||||
that.longitude = point.longitude;
|
||||
|
||||
that._mapContext.moveToLocation({
|
||||
latitude: point.latitude,
|
||||
longitude: point.longitude,
|
||||
})
|
||||
|
||||
let list = JSON.parse(JSON.stringify(that.markers));
|
||||
|
||||
let isFrist = 0;
|
||||
|
||||
list.forEach(function(item) {
|
||||
if (item.id == 100) {
|
||||
isFrist = 1;
|
||||
item.latitude = point.latitude;
|
||||
item.longitude = point.longitude;
|
||||
} else {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
if (isFrist == 0) {
|
||||
that.markers = that.markers.concat(point);
|
||||
} else {
|
||||
that.markers = list;
|
||||
}
|
||||
|
||||
//that.markers = list;
|
||||
|
||||
console.log(_item)
|
||||
// if (_item.length > 0) {
|
||||
// console.log("=============平移：", point.latitude)
|
||||
// console.log("=============平移：", point.longitude)
|
||||
// that._mapContext.translateMarker({
|
||||
// markerId: 100,
|
||||
// destination: {
|
||||
// latitude: point.latitude,
|
||||
// longitude: point.longitude,
|
||||
// },
|
||||
// fail(e) {
|
||||
// console.log(e)
|
||||
// }
|
||||
// })
|
||||
// } else {
|
||||
// console.log("=============新增")
|
||||
// that.markers = that.markers.concat(point);
|
||||
// }
|
||||
};
|
||||
},
|
||||
goToEdit() {
|
||||
let url = "../addEquip/addEquip?cameara=" + JSON.stringify(this.cameara)
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
},
|
||||
add() {
|
||||
uni.navigateTo({
|
||||
url: '../addEquip/addEquip'
|
||||
});
|
||||
},
|
||||
updateAction(index) {
|
||||
let cameara = JSON.parse(JSON.stringify(this.cameara))
|
||||
|
||||
let selfClick = this.markers.filter(item => {
|
||||
if (item.id == 100) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
selfClick = selfClick[0];
|
||||
console.log("=========================selfClick:", JSON.stringify(selfClick))
|
||||
let selfAuto = this.markers.filter(item => {
|
||||
if (item.id == 1) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
selfAuto = selfAuto[0];
|
||||
console.log("=========================selfAuto:", JSON.stringify(selfAuto))
|
||||
this.cameara = cameara;
|
||||
|
||||
// 用户当前位置
|
||||
if (index == 0) {
|
||||
cameara.latitude = selfAuto.latitude;
|
||||
cameara.longitude = selfAuto.longitude;
|
||||
} else {
|
||||
// 用户手选位置
|
||||
cameara.latitude = selfClick.latitude;
|
||||
cameara.longitude = selfClick.longitude;
|
||||
}
|
||||
this.$store.dispatch('updateEquipDetails', {data: cameara})
|
||||
},
|
||||
// 拖拽地图
|
||||
regionchange(event) {
|
||||
console.log("========中心点改变1")
|
||||
if (event.type == 'regionchange') {
|
||||
//this.getCenterLanLat()
|
||||
}
|
||||
},
|
||||
// 获取当前地图中心的经纬度
|
||||
getCenterLanLat() {
|
||||
console.log("========中心点改变2")
|
||||
let self = this
|
||||
self._mapContext.getCenterLocation({
|
||||
altitude:true,
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
let address = {
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude
|
||||
}
|
||||
|
||||
let list = JSON.parse(JSON.stringify(self.markers));
|
||||
let isFrist = 0;
|
||||
|
||||
list.forEach(function(item) {
|
||||
if (item.id == 1000) {
|
||||
isFrist = 1;
|
||||
item.latitude = res.latitude;
|
||||
item.longitude = res.longitude;
|
||||
}
|
||||
});
|
||||
|
||||
if (isFrist == 0) {
|
||||
console.log("========中心点改变20")
|
||||
self.markers = self.markers.concat({
|
||||
id: 1000,
|
||||
width: 50,
|
||||
height: 50,
|
||||
latitude: address.latitude,
|
||||
longitude: address.longitude,
|
||||
iconPath: "../../static/address_3.png",
|
||||
});
|
||||
} else {
|
||||
console.log("========中心点改变21")
|
||||
self.markers = list;
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
// console.log('获取当前地图中心的经纬度2', err);
|
||||
}
|
||||
})
|
||||
},
|
||||
tapMap(e) {
|
||||
var that = this;
|
||||
var id = e.currentTarget.id;
|
||||
var maps = this._mapContext.$getAppMap();
|
||||
console.log("============maps:", maps)
|
||||
maps.onclick = function(point) {
|
||||
console.log(point);
|
||||
|
||||
point.iconPath = '../../static/address_2.png';
|
||||
point.id = 100
|
||||
|
||||
that._mapContext.moveToLocation({
|
||||
latitude: point.latitude,
|
||||
longitude: point.longitude,
|
||||
})
|
||||
|
||||
let list = JSON.parse(JSON.stringify(that.markers));
|
||||
|
||||
let isFrist = 0;
|
||||
|
||||
list.forEach(function(item) {
|
||||
if (item.id == 100) {
|
||||
isFrist = 1;
|
||||
item.latitude = point.latitude;
|
||||
item.longitude = point.longitude;
|
||||
} else {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
if (isFrist == 0) {
|
||||
that.markers = that.markers.concat(point);
|
||||
} else {
|
||||
that.markers = list;
|
||||
}
|
||||
|
||||
//that.markers = list;
|
||||
|
||||
console.log(_item)
|
||||
// if (_item.length > 0) {
|
||||
// console.log("=============平移：", point.latitude)
|
||||
// console.log("=============平移：", point.longitude)
|
||||
// that._mapContext.translateMarker({
|
||||
// markerId: 100,
|
||||
// destination: {
|
||||
// latitude: point.latitude,
|
||||
// longitude: point.longitude,
|
||||
// },
|
||||
// fail(e) {
|
||||
// console.log(e)
|
||||
// }
|
||||
// })
|
||||
// } else {
|
||||
// console.log("=============新增")
|
||||
// that.markers = that.markers.concat(point);
|
||||
// }
|
||||
};
|
||||
},
|
||||
goToSelectCamera() {
|
||||
uni.navigateTo({
|
||||
url: '../listPage/listPage'
|
||||
});
|
||||
console.log("获取周围美食");
|
||||
},
|
||||
reGetLocation() {
|
||||
this.getLocationInfo();
|
||||
},
|
||||
// 确认授权后，获取用户位置
|
||||
getLocationInfo() {
|
||||
const that = this;
|
||||
uni.getLocation({
|
||||
isHighAccuracy: true,
|
||||
highAccuracyExpireTime: 3500,
|
||||
accuracy: 'best',
|
||||
altitude:true,
|
||||
type: "gcj02",
|
||||
success: function(res) {
|
||||
|
||||
console.log("============================定位结果res:",res);
|
||||
// 暂时
|
||||
that.longitude = res.longitude; //118.787575;
|
||||
that.latitude = res.latitude; //32.05024;
|
||||
//精确度信息
|
||||
that.accuracy = res.accuracy;
|
||||
that.altitude = res.altitude;
|
||||
that.horizontalAccuracy = res.horizontalAccuracy;
|
||||
|
||||
|
||||
that._mapContext.moveToLocation({
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude,
|
||||
})
|
||||
|
||||
|
||||
let list = JSON.parse(JSON.stringify(that.markers));
|
||||
|
||||
let isFrist = 0;
|
||||
|
||||
list.forEach(function(item) {
|
||||
if (item.id == 1) {
|
||||
isFrist = 1;
|
||||
item.latitude = res.latitude;
|
||||
item.longitude = res.longitude;
|
||||
} else {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
if (isFrist == 0) {
|
||||
that.markers.push({
|
||||
id: 1,
|
||||
width: 50,
|
||||
height: 50,
|
||||
latitude: res.latitude,
|
||||
longitude: res.longitude,
|
||||
iconPath: "../../static/address_1.png",
|
||||
width: that.markerHeight, //宽
|
||||
height: that.markerHeight, //高
|
||||
color: '#FFFFFF'
|
||||
})
|
||||
} else {
|
||||
that.markers = list;
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
fail(err) {
|
||||
uni.showToast({
|
||||
icon: "error",
|
||||
title: "获取位置出错"
|
||||
})
|
||||
console.log(err)
|
||||
}
|
||||
});
|
||||
},
|
||||
getList() {
|
||||
console.log("获取周围美食");
|
||||
console.log(this.markers.length)
|
||||
},
|
||||
historyPosition() {
|
||||
const returnedTarget = Object.assign(this.$store.state.equip.currentData, this.$store.state.equip.currentDataDetails);
|
||||
let cameara=returnedTarget
|
||||
if (cameara.longitude) {
|
||||
console.log("==============更新旧点")
|
||||
|
||||
// cameara.longitude = info[0];
|
||||
// cameara.latitude = info[1];
|
||||
|
||||
let point = {};
|
||||
point.iconPath = '../../static/address_4.png';
|
||||
point.id = 10000
|
||||
point.latitude = cameara.latitude;
|
||||
point.longitude = cameara.longitude;
|
||||
|
||||
let list = JSON.parse(JSON.stringify(this.markers));
|
||||
|
||||
let isFrist = 0;
|
||||
|
||||
list.forEach(function(item) {
|
||||
if (item.id == 10000) {
|
||||
isFrist = 1;
|
||||
item.latitude = cameara.latitude;
|
||||
item.longitude = cameara.longitude;
|
||||
}
|
||||
});
|
||||
|
||||
if (isFrist == 0) {
|
||||
this.markers = this.markers.concat(point);
|
||||
} else {
|
||||
this.markers = list;
|
||||
}
|
||||
console.log("=====================this.markers:", JSON.stringify(this.markers))
|
||||
} else {
|
||||
let list = JSON.parse(JSON.stringify(this.markers));
|
||||
let _index = 10000;
|
||||
list.forEach(function(item, index) {
|
||||
if (item.id == 10000) {
|
||||
_index = index
|
||||
}
|
||||
});
|
||||
if (_index != 10000) {
|
||||
list.splice(_index, _index)
|
||||
}
|
||||
this.markers = list;
|
||||
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
moveTo(index) {
|
||||
|
||||
let point_list = this.markers.filter(item => {
|
||||
if (item.id == index) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
let point = point_list[0];
|
||||
if (point_list.length > 0) {
|
||||
this._mapContext.moveToLocation({
|
||||
latitude: point.latitude,
|
||||
longitude: point.longitude,
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
getById(id) {
|
||||
this.$u.post(config.api + '/xfhrshInternet/service/selPicture', {
|
||||
subjectId: id
|
||||
}).then(res => {
|
||||
if(res.code==0){
|
||||
this.$store.dispatch('setCurrentEquipDtails', {data: res.data[0]})
|
||||
}
|
||||
//this.camera_list = res;
|
||||
});
|
||||
},
|
||||
},
|
||||
onUnload: function() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 监听事件
|
||||
uni.$on('updateCamera', (cameara) => {
|
||||
setTimeout(() => {
|
||||
this.historyPosition()
|
||||
}, 2500)
|
||||
})
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
// 移除监听事件
|
||||
uni.$off('updateCamera');
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-nav-slot {
|
||||
padding: 0 20rpx 0 0;
|
||||
}
|
||||
|
||||
.cameraInfo {
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.btnListBox {
|
||||
display: flex;
|
||||
width: 300rpx;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cameraItem {
|
||||
margin: 0 24rpx;
|
||||
margin-top: 30rpx !important;
|
||||
border: 1px solid #A3A8A8;
|
||||
border-radius: 10rpx;
|
||||
padding: 10rpx;
|
||||
|
||||
.editItem {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin: 20rpx 0;
|
||||
|
||||
.editItemBtn {
|
||||
border: 1rpx solid #A3A8A8;
|
||||
border-radius: 4rpx;
|
||||
padding: 4rpx 4rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cameraItemLi {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.unKnow {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.btnList {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.btnList1 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.tipsList {
|
||||
margin: 10rpx;
|
||||
}
|
||||
|
||||
.selectPointPosition {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user