From d414b5cb8a029f079d40279f70024eca0bf7005e Mon Sep 17 00:00:00 2001 From: dai <851733175@qq.com> Date: Mon, 24 Oct 2022 17:56:35 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E5=8F=AF=E8=A7=86=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/modules/visual/command/cpts/map.vue | 103 +++++++++--- src/views/modules/visual/cpts/map/index.vue | 129 ++++++++++++--- src/views/modules/visual/cpts/map/index2.vue | 150 ++++++++++++++---- 3 files changed, 311 insertions(+), 71 deletions(-) diff --git a/src/views/modules/visual/command/cpts/map.vue b/src/views/modules/visual/command/cpts/map.vue index 453832394..5b4ddf5d6 100644 --- a/src/views/modules/visual/command/cpts/map.vue +++ b/src/views/modules/visual/command/cpts/map.vue @@ -1,5 +1,5 @@ From 34d825708e32255b388a08cc0cbe45230d02217c Mon Sep 17 00:00:00 2001 From: jiangyy Date: Tue, 25 Oct 2022 09:34:32 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E5=85=9A=E5=BB=BA=E6=B4=BB=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../regionalParty/activitysDetail.vue | 140 +++--------- .../regionalParty/activitysForm.vue | 196 +++++++--------- .../regionalParty/unitsDetail.vue | 141 +++--------- .../regionalParty/unitsForm.vue | 191 +++++++--------- .../partymember/icpartyorg-add-or-update.vue | 215 +++++++++--------- 5 files changed, 333 insertions(+), 550 deletions(-) diff --git a/src/views/modules/communityParty/regionalParty/activitysDetail.vue b/src/views/modules/communityParty/regionalParty/activitysDetail.vue index b15298ed4..68b768518 100644 --- a/src/views/modules/communityParty/regionalParty/activitysDetail.vue +++ b/src/views/modules/communityParty/regionalParty/activitysDetail.vue @@ -43,7 +43,7 @@ 活动地图：
-
+
@@ -101,7 +101,7 @@ export default { diaDestroy () { if (map) { - map.destroy() + // map.destroy() } }, @@ -120,122 +120,54 @@ export default { this.initLoading = true + + let { latitude, longitude } = this.$store.state.user; + console.log('lat' + latitude + ',lon' + longitude) + if (this.formData.latitude && this.formData.longitude) { + latitude = this.formData.latitude + longitude = this.formData.longitude + } + if (!latitude || latitude == "" || latitude == "0") { + latitude = 39.9088810666821; + longitude = 116.39743841556731; + } this.$nextTick(() => { - this.initMap() + if (!map) { + this.initMap(latitude, longitude) + } else { + map.setCenter(latitude, longitude); + map.setMarker(latitude, longitude); + + } + }) this.endLoading() }, - // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 - initMap () { - // 定义地图中心点坐标 - var center = new window.TMap.LatLng(this.formData.latitude, this.formData.longitude) - // 定义map变量，调用 TMap.Map() 构造函数创建地图 - map = new window.TMap.Map(document.getElementById('app_act_detail'), { - center: center, // 设置地图中心点坐标 - zoom: 17.2, // 设置地图缩放级别 - pitch: 43.5, // 设置俯仰角 - rotation: 45 // 设置地图旋转角度 - }) - - search = new window.TMap.service.Search({ pageSize: 10 }) - // 新建一个地点搜索类 - markers = new TMap.MultiMarker({ - map: map, - geometries: [] - }) - infoWindowList = Array(10) - - geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 - // 监听地图平移结束 - map.on('panend', () => { - this.handleMoveCenter() - }) - this.handleMoveCenter() - this.convert() - }, + // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 + initMap (latitude, longitude) { - setMarker (lat, lng) { - markers.setGeometries([]) - markers.add([ + map = new daiMap( + document.getElementById("app_detail_activity"), + { latitude, longitude }, { - id: '4', - styleId: 'marker', - position: new TMap.LatLng(lat, lng), - properties: { - title: 'marker4' - } + zoom: 16.2, // 设置地图缩放级别 + pitch: 43.5, // 设置俯仰角 + rotation: 45, // 设置地图旋转角度 } - ]) - }, + ); - handleSearchMap () { - infoWindowList.forEach((infoWindow) => { - infoWindow.close() - }) - infoWindowList.length = 0 - markers.setGeometries([]) - // 在地图显示范围内以给定的关键字搜索地点 - search - .searchRectangle({ - keyword: this.keyWords, - bounds: map.getBounds() - }) - .then((result) => { - let { data } = result - if (Array.isArray(data) && data.length > 0) { - const { - location: { lat, lng } - } = data[0] - - - map.setCenter(new TMap.LatLng(lat, lng)) - this.setMarker(lat, lng) - this.formData.latitude = lat - this.formData.longitude = lng - this.convert() - } else { - this.$message.error('未检索到相关位置坐标') - } - }) - }, + // // 监听地图平移结束 + // map.on("dragend", (e) => { + // this.handleMoveCenter(e); + // }); - handleMoveCenter () { - //修改地图中心点 - const center = map.getCenter() - const lat = center.getLat() - const lng = center.getLng() - this.formData.latitude = lat - this.formData.longitude = lng - this.setMarker(lat, lng) - this.convert(lat, lng) - }, + map.setCenter(latitude, longitude); + map.setMarker(latitude, longitude); - convert (lat, lng) { - markers.setGeometries([]); - // var input = document.getElementById('location').value.split(','); - let location - if (lat && lng) { - location = new TMap.LatLng(lat, lng); - } else { - location = new TMap.LatLng(this.formData.latitude, this.formData.longitude); - } - // map.setCenter(location); - markers.updateGeometries([ - { - id: 'main', // 点标注数据数组 - position: location, - }, - ]); - geocoder - .getAddress({ location: location }) // 将给定的坐标位置转换为地址 - .then((result) => { - // this.formData.address = result.result.address - // 显示搜索到的地址 - }); }, // 开启加载动画 diff --git a/src/views/modules/communityParty/regionalParty/activitysForm.vue b/src/views/modules/communityParty/regionalParty/activitysForm.vue index b14e910f3..4777fb487 100644 --- a/src/views/modules/communityParty/regionalParty/activitysForm.vue +++ b/src/views/modules/communityParty/regionalParty/activitysForm.vue @@ -241,6 +241,10 @@ export default { } return { formType: 'add', //表单操作类型 add新增，edit编辑，detail详情 + searchOptions: [], + searchValue: '', + resultList: [], + loading: false, btnDisable: false, @@ -255,7 +259,7 @@ export default { }, components: { Tinymce }, mounted () { - this.initMap() + // this.initMap() }, @@ -270,13 +274,6 @@ export default { await this.loadService() let { latitude, longitude } = this.$store.state.user; - if (!latitude || latitude == "" || latitude == "0") { - latitude = 39.9088810666821; - longitude = 116.39743841556731; - } - - this.formData.latitude = latitude - this.formData.longitude = longitude this.formType = type if (activityId) { @@ -284,11 +281,17 @@ export default { this.formData.id = activityId await this.loadFormData() } else { - + this.formData.latitude = latitude + this.formData.longitude = longitude } - - map.setCenter(new TMap.LatLng(this.formData.latitude, this.formData.longitude)) - this.setMarker(this.formData.latitude, this.formData.longitude) + this.$nextTick(() => { + if (!map) { + this.initMap(this.formData.latitude, this.formData.longitude); + } else { + map.setCenter(this.formData.latitude, this.formData.longitude); + map.setMarker(this.formData.latitude, this.formData.longitude); + } + }) this.endLoading() }, @@ -351,8 +354,7 @@ export default { } console.log(this.formData.content) - // map.setCenter(new TMap.LatLng(parseFloat(this.formData.latitude), parseFloat(this.formData.longitude))) - // this.setMarker(this.formData.latitude, this.formData.longitude) + } else { this.$message.error(msg) } @@ -404,118 +406,90 @@ export default { }, // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 - initMap () { - // 定义地图中心点坐标 - var center = new window.TMap.LatLng(36.0722275, 120.38945519) - // 定义map变量，调用 TMap.Map() 构造函数创建地图 - map = new window.TMap.Map(document.getElementById('app'), { - center: center, // 设置地图中心点坐标 - zoom: 16.2, // 设置地图缩放级别 - pitch: 43.5, // 设置俯仰角 - rotation: 45 // 设置地图旋转角度 - }) + initMap (latitude, longitude) { - search = new window.TMap.service.Search({ pageSize: 10 }) - // 新建一个地点搜索类 - markers = new TMap.MultiMarker({ - map: map, - geometries: [] - }) - infoWindowList = Array(10) - - geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 + map = new daiMap( + document.getElementById("app_activity"), + { latitude, longitude }, + { + zoom: 16.2, // 设置地图缩放级别 + pitch: 43.5, // 设置俯仰角 + rotation: 45, // 设置地图旋转角度 + } + ); // 监听地图平移结束 - map.on('panend', () => { - this.handleMoveCenter() - }) - this.handleMoveCenter() - this.convert() - }, + map.on("dragend", (e) => { + this.handleMoveCenter(e); + }); - setMarker (lat, lng) { - markers.setGeometries([]) - markers.add([ - { - id: '4', - styleId: 'marker', - position: new TMap.LatLng(lat, lng), - properties: { - title: 'marker4' - } - } - ]) - }, + map.setCenter(latitude, longitude); + map.setMarker(latitude, longitude); - handleSearchMap () { - infoWindowList.forEach((infoWindow) => { - infoWindow.close() - }) - infoWindowList.length = 0 - markers.setGeometries([]) - // 在地图显示范围内以给定的关键字搜索地点 - search - .searchNearby({ - keyword: this.keyWords, - radius: 1000, - autoExtend: true, - center: map.getCenter(), - }) - .then((result) => { - let { data } = result - if (Array.isArray(data) && data.length > 0) { - const { - location: { lat, lng } - } = data[0] - - - map.setCenter(new TMap.LatLng(lat, lng)) - this.setMarker(lat, lng) - this.formData.latitude = lat - this.formData.longitude = lng - this.convert() - } else { - this.$message.error('未检索到相关位置坐标') - } - }) }, - handleMoveCenter () { + + async handleMoveCenter () { //修改地图中心点 - const center = map.getCenter() - const lat = center.getLat() - const lng = center.getLng() - this.formData.latitude = lat - this.formData.longitude = lng - this.setMarker(lat, lng) - this.convert(lat, lng) + const { lat, lng } = map.getCenter(); + this.formData.latitude = lat; + this.formData.longitude = lng; + map.setMarker(lat, lng); + + let { msg, data } = await map.getAddress(lat, lng); + if (msg == "success") { + this.formData.address = data.address + this.searchValue = data.address + this.searchOptions = [] + + } }, - convert (lat, lng) { - markers.setGeometries([]); - // var input = document.getElementById('location').value.split(','); - let location - if (lat && lng) { - location = new TMap.LatLng(lat, lng); + async remoteMethod (query) { + + if (query !== '') { + this.loading = true; + + const { msg, data } = await map.searchNearby(query); + this.loading = false; + this.resultList = [] + + if (msg == "success" && data.resultList && data.resultList.length > 0) { + + if (data.resultList && data.resultList.length > 0) { + this.resultList = data.resultList + this.searchOptions = this.resultList.map(item => { + return { value: `${item.hotPointID}`, label: `${item.address + item.name}` }; + + }); + } + } else { + this.searchOptions = [ + { + value: '0', + label: '未检索到结果' + } + ] + } } else { - location = new TMap.LatLng(this.formData.latitude, this.formData.longitude); + this.searchOptions = []; } - // map.setCenter(location); - markers.updateGeometries([ - { - id: 'main', // 点标注数据数组 - position: location, - }, - ]); - geocoder - .getAddress({ location: location }) // 将给定的坐标位置转换为地址 - .then((result) => { - this.formData.address = result.result.address - // 显示搜索到的地址 - }); + }, + + handleClickKey (index) { + let selPosition = this.resultList[index] + let lonlat = selPosition.lonlat.split(" ") + map.setCenter(lonlat[1], lonlat[0]); + map.setMarker(lonlat[1], lonlat[0]); + this.formData.latitude = lonlat[1]; + this.formData.longitude = lonlat[0]; + this.formData.address = selPosition.address + selPosition.name }, resetData () { + this.searchValue = '' + this.searchOptions = [] + this.resultList = [] this.activityId = '' this.keyWords = '' this.formData = { diff --git a/src/views/modules/communityParty/regionalParty/unitsDetail.vue b/src/views/modules/communityParty/regionalParty/unitsDetail.vue index 8949383b5..4290b99a8 100644 --- a/src/views/modules/communityParty/regionalParty/unitsDetail.vue +++ b/src/views/modules/communityParty/regionalParty/unitsDetail.vue @@ -45,7 +45,7 @@ 地图位置：
-
+
@@ -96,7 +96,7 @@ export default { diaDestroy () { if (map) { - map.destroy() + // map.destroy() } }, @@ -107,22 +107,11 @@ export default { this.initLoading = true console.log(this.formData) // await nextTick(200) - this.$nextTick(() => { - this.initMap() - }) - this.endLoading() - }, - - // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 - initMap () { - // 定义地图中心点坐标 let { latitude, longitude } = this.$store.state.user; - - + console.log('lat' + latitude + ',lon' + longitude) if (this.formData.latitude && this.formData.longitude) { - latitude = this.formData.latitude longitude = this.formData.longitude } @@ -130,116 +119,44 @@ export default { latitude = 39.9088810666821; longitude = 116.39743841556731; } - // debugger - console.log('lat' + latitude + ',lon' + longitude) - var center = new window.TMap.LatLng(latitude, longitude) - // 定义map变量，调用 TMap.Map() 构造函数创建地图 - map = new window.TMap.Map(document.getElementById('app_detail'), { - center: center, // 设置地图中心点坐标 - zoom: 17.2, // 设置地图缩放级别 - pitch: 43.5, // 设置俯仰角 - rotation: 45 // 设置地图旋转角度 - }) + this.$nextTick(() => { + if (!map) { + this.initMap(latitude, longitude) + } else { + map.setCenter(latitude, longitude); + map.setMarker(latitude, longitude); + + } - search = new window.TMap.service.Search({ pageSize: 10 }) - // 新建一个地点搜索类 - markers = new TMap.MultiMarker({ - map: map, - geometries: [] }) - infoWindowList = Array(10) - geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 + this.endLoading() - // 监听地图平移结束 - map.on('panend', () => { - this.handleMoveCenter() - }) - this.handleMoveCenter() - this.convert() }, - setMarker (lat, lng) { - markers.setGeometries([]) - markers.add([ + + // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 + initMap (latitude, longitude) { + + map = new daiMap( + document.getElementById("app_detail_unit"), + { latitude, longitude }, { - id: '4', - styleId: 'marker', - position: new TMap.LatLng(lat, lng), - properties: { - title: 'marker4' - } + zoom: 16.2, // 设置地图缩放级别 + pitch: 43.5, // 设置俯仰角 + rotation: 45, // 设置地图旋转角度 } - ]) - }, + ); - handleSearchMap () { - infoWindowList.forEach((infoWindow) => { - infoWindow.close() - }) - infoWindowList.length = 0 - markers.setGeometries([]) - // 在地图显示范围内以给定的关键字搜索地点 - search - .searchRectangle({ - keyword: this.keyWords, - bounds: map.getBounds() - }) - .then((result) => { - let { data } = result - if (Array.isArray(data) && data.length > 0) { - const { - location: { lat, lng } - } = data[0] - - - map.setCenter(new TMap.LatLng(lat, lng)) - this.setMarker(lat, lng) - this.formData.latitude = lat - this.formData.longitude = lng - this.convert() - } else { - this.$message.error('未检索到相关位置坐标') - } - }) - }, + // // 监听地图平移结束 + // map.on("dragend", (e) => { + // this.handleMoveCenter(e); + // }); - handleMoveCenter () { - //修改地图中心点 - const center = map.getCenter() - const lat = center.getLat() - const lng = center.getLng() - this.formData.latitude = lat - this.formData.longitude = lng - this.setMarker(lat, lng) - this.convert(lat, lng) - }, + map.setCenter(latitude, longitude); + map.setMarker(latitude, longitude); - convert (lat, lng) { - markers.setGeometries([]); - // var input = document.getElementById('location').value.split(','); - let location - if (lat && lng) { - location = new TMap.LatLng(lat, lng); - } else { - location = new TMap.LatLng(this.formData.latitude, this.formData.longitude); - } - - // map.setCenter(location); - markers.updateGeometries([ - { - id: 'main', // 点标注数据数组 - position: location, - }, - ]); - geocoder - .getAddress({ location: location }) // 将给定的坐标位置转换为地址 - .then((result) => { - // this.formData.address = result.result.address - // 显示搜索到的地址 - }); }, - // 开启加载动画 startLoading () { loading = Loading.service({ diff --git a/src/views/modules/communityParty/regionalParty/unitsForm.vue b/src/views/modules/communityParty/regionalParty/unitsForm.vue index 4afeebdbc..cf985eb3a 100644 --- a/src/views/modules/communityParty/regionalParty/unitsForm.vue +++ b/src/views/modules/communityParty/regionalParty/unitsForm.vue @@ -176,6 +176,10 @@ export default { } return { formType: 'add', //表单操作类型 add新增，edit编辑，detail详情 + searchOptions: [], + searchValue: '', + resultList: [], + loading: false, btnDisable: false, @@ -202,13 +206,7 @@ export default { await this.loadService() let { latitude, longitude } = this.$store.state.user; - if (!latitude || latitude == "" || latitude == "0") { - latitude = 39.9088810666821; - longitude = 116.39743841556731; - } - this.formData.latitude = latitude - this.formData.longitude = longitude this.formType = type if (unitId) { @@ -216,14 +214,13 @@ export default { this.formData.id = unitId await this.loadFormData() } else { - + this.formData.latitude = latitude + this.formData.longitude = longitude } - this.$nextTick(() => { - this.initMap() - - this.setMarker(this.formData.latitude, this.formData.longitude) - }) + // if (!map) { + this.initMap(this.formData.latitude, this.formData.longitude); + // } @@ -266,8 +263,7 @@ export default { } this.formData = { ...data } - // map.setCenter(new TMap.LatLng(this.formData.latitude, this.formData.longitude)) - // this.setMarker(this.formData.latitude, this.formData.longitude) + } else { this.$message.error(msg) } @@ -333,123 +329,94 @@ export default { }, // 地图初始化函数，本例取名为init，开发者可根据实际情况定义 - initMap () { - // 定义地图中心点坐标 - var center = new window.TMap.LatLng(this.formData.latitude, this.formData.longitude) - // 定义map变量，调用 TMap.Map() 构造函数创建地图 - map = new window.TMap.Map(document.getElementById('app'), { - center: center, // 设置地图中心点坐标 - zoom: 16.2, // 设置地图缩放级别 - pitch: 43.5, // 设置俯仰角 - rotation: 45 // 设置地图旋转角度 - }) - - search = new window.TMap.service.Search({ pageSize: 10 }) - // 新建一个地点搜索类 - markers = new TMap.MultiMarker({ - map: map, - geometries: [] - }) - infoWindowList = Array(10) + initMap (latitude, longitude) { - geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 + map = new daiMap( + document.getElementById("app_unit"), + { latitude, longitude }, + { + zoom: 16.2, // 设置地图缩放级别 + pitch: 43.5, // 设置俯仰角 + rotation: 45, // 设置地图旋转角度 + } + ); // 监听地图平移结束 - map.on('panend', () => { - this.handleMoveCenter() - }) - this.handleMoveCenter() - this.convert() - }, + map.on("dragend", (e) => { + this.handleMoveCenter(e); + }); - setMarker (lat, lng) { - markers.setGeometries([]) - markers.add([ - { - id: '4', - styleId: 'marker', - position: new TMap.LatLng(lat, lng), - properties: { - title: 'marker4' - } - } - ]) - }, + map.setCenter(latitude, longitude); + map.setMarker(latitude, longitude); - handleSearchMap () { - infoWindowList.forEach((infoWindow) => { - infoWindow.close() - }) - infoWindowList.length = 0 - markers.setGeometries([]) - // 在地图显示范围内以给定的关键字搜索地点 - search - .searchNearby({ - keyword: this.keyWords, - radius: 1000, - autoExtend: true, - center: map.getCenter(), - }) - .then((result) => { - let { data } = result - if (Array.isArray(data) && data.length > 0) { - const { - location: { lat, lng } - } = data[0] - - - map.setCenter(new TMap.LatLng(lat, lng)) - this.setMarker(lat, lng) - this.formData.latitude = lat - this.formData.longitude = lng - this.convert() - } else { - this.$message.error('未检索到相关位置坐标') - } - }) }, - handleMoveCenter () { + + async handleMoveCenter () { //修改地图中心点 - const center = map.getCenter() - const lat = center.getLat() - const lng = center.getLng() - this.formData.latitude = lat - this.formData.longitude = lng - this.setMarker(lat, lng) - this.convert(lat, lng) + const { lat, lng } = map.getCenter(); + this.formData.latitude = lat; + this.formData.longitude = lng; + map.setMarker(lat, lng); + + let { msg, data } = await map.getAddress(lat, lng); + if (msg == "success") { + this.formData.address = data.address + this.searchValue = data.address + this.searchOptions = [] + + } }, - convert (lat, lng) { - markers.setGeometries([]); - // var input = document.getElementById('location').value.split(','); - let location - if (lat && lng) { - location = new TMap.LatLng(lat, lng); + async remoteMethod (query) { + + if (query !== '') { + this.loading = true; + + const { msg, data } = await map.searchNearby(query); + this.loading = false; + this.resultList = [] + + if (msg == "success" && data.resultList && data.resultList.length > 0) { + + if (data.resultList && data.resultList.length > 0) { + this.resultList = data.resultList + this.searchOptions = this.resultList.map(item => { + return { value: `${item.hotPointID}`, label: `${item.address + item.name}` }; + + }); + } + } else { + this.searchOptions = [ + { + value: '0', + label: '未检索到结果' + } + ] + } } else { - location = new TMap.LatLng(this.formData.latitude, this.formData.longitude); + this.searchOptions = []; } + }, - // map.setCenter(location); - markers.updateGeometries([ - { - id: 'main', // 点标注数据数组 - position: location, - }, - ]); - geocoder - .getAddress({ location: location }) // 将给定的坐标位置转换为地址 - .then((result) => { - this.formData.address = result.result.address - // 显示搜索到的地址 - }); + handleClickKey (index) { + let selPosition = this.resultList[index] + let lonlat = selPosition.lonlat.split(" ") + map.setCenter(lonlat[1], lonlat[0]); + map.setMarker(lonlat[1], lonlat[0]); + this.formData.latitude = lonlat[1]; + this.formData.longitude = lonlat[0]; + this.formData.address = selPosition.address + selPosition.name }, resetData () { + this.searchValue = '' + this.searchOptions = [] + this.resultList = [] if (map) { console.log(map) - map.destroy() + // map.destroy() } this.unitId = '' this.keyWords = '' diff --git a/src/views/modules/partymember/icpartyorg-add-or-update.vue b/src/views/modules/partymember/icpartyorg-add-or-update.vue index 41f480ce0..06c1beea3 100644 --- a/src/views/modules/partymember/icpartyorg-add-or-update.vue +++ b/src/views/modules/partymember/icpartyorg-add-or-update.vue @@ -88,7 +88,6 @@
+ + +