From bb99c3b765b4b1132fa8296d5c50c99ae220b242 Mon Sep 17 00:00:00 2001 From: xianfuxing Date: Fri, 6 Aug 2021 15:07:07 +0800 Subject: [PATCH] =?UTF-8?q?#=20=E6=9B=B4=E6=96=B0marker=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/counter/device.vue | 2 +- src/views/counter/map2.vue | 56 ++++++++++++++++-------------------- 2 files changed, 25 insertions(+), 33 deletions(-) diff --git a/src/views/counter/device.vue b/src/views/counter/device.vue index a859925..9c70bbd 100644 --- a/src/views/counter/device.vue +++ b/src/views/counter/device.vue @@ -183,7 +183,7 @@ export default { console.log('Err: click map failed') }) this.$store.dispatch('changeDeviceID', deviceID).then(() => { - this.$router.push('/counter/map') + this.$router.push({ path: '/counter/map', query: { device_id: deviceID }}) }).catch(() => { console.log('Err: get device_id failed in device page') }) diff --git a/src/views/counter/map2.vue b/src/views/counter/map2.vue index ad49bde..214cf3c 100644 --- a/src/views/counter/map2.vue +++ b/src/views/counter/map2.vue @@ -22,28 +22,22 @@ export default { flag: false, mapClick: false, geo: [], - defaultPositions: [ - { - title: '貝沙灣五期', - position: [114.137045, 22.254383], - count: 2207, - signal: 22, - energy: 4149 - }, - { - title: '貝沙灣二期', - position: [114.138051, 22.254208], - count: 262, - signal: 25, - energy: 4155 - } - ] + deviceList: [], + deviceListQuery: { + page: 1, + limit: 100 + } } }, methods: { sleep(time) { for (var temp = Date.now(); Date.now() - temp <= time;); }, + async getDevices(params) { + await fetchDeviceList(params).then(response => { + this.deviceList = response.data.results + }) + }, gotoDriving() { this.$confirm('此操作将跳转到路线规划, 是否继续?', '提示', { confirmButtonText: '确定', @@ -65,19 +59,21 @@ export default { }) }) }, - initMap() { + async initMap() { this.map = new AMap.Map('map-container', { center: [114.143472, 22.284105], resizeEnable: true, zoom: 10 }) // 标记点测试数据 + await this.getDevices(this.deviceListQuery) const markers = [] - this.defaultPositions.forEach((item, index) => { + this.deviceList.forEach((item, index) => { + console.log(item) const marker = new AMap.Marker({ - position: item.position, + position: item.coordinate, zIndex: 10, - title: item.title, + title: item.device_name, map: this.map }) const infoWindow = this.instantiateInforWindow(item) @@ -146,7 +142,7 @@ export default { const infoWindow = new AMap.InfoWindow({ isCustom: true, closeWhenClickMap: true, - content: this.createInfoWindow(item.title, content.join('\n')), + content: this.createInfoWindow(item.device_name, content.join('\n')), offset: new AMap.Pixel(16, -45) }) return infoWindow @@ -219,7 +215,7 @@ export default { this.deviceList = response.data.results const item = this.deviceList[0] this.coordinate = item.coordinate - if (this.coordinate === null) { + if (!this.coordinate) { this.coordinate = [113.203460828994, 22.64902452257] } this.map = new AMap.Map('map-container', { @@ -232,8 +228,6 @@ export default { zIndex: 10, map: this.map }) - - // item.title = '东岸灯饰工业区' item.title = item.device_name const infoWindow = this.instantiateInforWindow(item, true) AMap.event.addListener(marker, 'click', () => { @@ -251,18 +245,16 @@ export default { } }, created() { - this.mapClick = this.$store.getters.mapClick - // if (!this.mapClick) { - // this.flag = true - // } + // this.mapClick = this.$store.getters.mapClick }, - mounted() { - if (this.mapClick) { - const device_id = this.$store.getters.deviceID + async mounted() { + const device_id = this.$route.query.device_id + if (device_id) { + // const device_id = this.$store.getters.deviceID // this.sleep(2000) this.getDevicesInitMap({ device_id }) } else { - this.initMap() + await this.initMap() } } }