From be43ae37aa88cbc843df482c953112ea3d29c9be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E5=B8=85?= Date: Thu, 29 May 2025 15:30:22 +0800 Subject: [PATCH] =?UTF-8?q?1.=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- propertyManagement-ui/.env.production | 4 +- .../views/business/community/gaode/index.vue | 129 ++++++++++++ .../src/views/business/community/index.vue | 196 ++++++++++++++++-- 3 files changed, 307 insertions(+), 22 deletions(-) create mode 100644 propertyManagement-ui/src/views/business/community/gaode/index.vue diff --git a/propertyManagement-ui/.env.production b/propertyManagement-ui/.env.production index 84e41ee..2f924a2 100644 --- a/propertyManagement-ui/.env.production +++ b/propertyManagement-ui/.env.production @@ -4,8 +4,8 @@ VUE_APP_TITLE = 利龙物业后台管理系统 # 生产环境配置 ENV = 'production' -# Fastbuild管理平台/生产环境 -VUE_APP_BASE_API = '/prod-api' +# 利龙物业管理平台/生产环境 +VUE_APP_BASE_API = 'https://admin.llwygl.com/prod-api' # 应用访问路径 例如使用前缀 /admin/ VUE_APP_CONTEXT_PATH = '/' diff --git a/propertyManagement-ui/src/views/business/community/gaode/index.vue b/propertyManagement-ui/src/views/business/community/gaode/index.vue new file mode 100644 index 0000000..af765fe --- /dev/null +++ b/propertyManagement-ui/src/views/business/community/gaode/index.vue @@ -0,0 +1,129 @@ + + + + + + + + 默认点标记 + + + + + +
+
+ +
+ + +
+
+ + +
+
+ + + + + diff --git a/propertyManagement-ui/src/views/business/community/index.vue b/propertyManagement-ui/src/views/business/community/index.vue index 08bf20d..98e26ec 100644 --- a/propertyManagement-ui/src/views/business/community/index.vue +++ b/propertyManagement-ui/src/views/business/community/index.vue @@ -147,9 +147,20 @@ - + -
+ + + + + + + + + + + +
取消 确定 @@ -223,10 +234,17 @@ export default { bigMap: null, // 大地图实例 marker: null, // 标记点 selectedPosition: null, // 选中的位置 + // 新增地图搜索相关数据 + searchKeyword: '', // 搜索关键词 + placeSearch: null, // 地点搜索服务 + supportGeolocation: false, // 是否支持定位 + geolocation: null, // 定位服务 }; }, created() { this.getList(); + // 检测浏览器是否支持定位 + this.supportGeolocation = 'geolocation' in navigator; }, methods: { /** 查询小区列表 */ @@ -356,26 +374,75 @@ export default { this.bigMap = null; } + // 配置安全密钥（如果启用了） + window._AMapSecurityConfig = { + securityJsCode: '44255e7f71b0344ad567cfcff4c8e381' + }; + // 异步加载AMap const AMap = await AMapLoader.load({ key: 'ed6cc1d37c6db81aac6d65c9d7d1b4d8', // 替换为你的Key version: '2.0', - plugins: ['AMap.Scale'] + plugins: [ + 'AMap.Scale', // 比例尺 + 'AMap.ToolBar', // 缩放工具条 + 'AMap.ControlBar', // 3D控制 + 'AMap.HawkEye', // 鹰眼图 + 'AMap.MapType', // 地图类型切换 + 'AMap.Geolocation', // 定位 + 'AMap.PlaceSearch', // 地点搜索 + 'AMap.AutoComplete' // 输入提示 + ] }); // 创建新实例 this.bigMap = new AMap.Map('big-map-container', { zoom: 15, + viewMode: '3D', // 开启3D视图 center: this.form.longitude && this.form.latitude ? [parseFloat(this.form.longitude), parseFloat(this.form.latitude)] - : [113.613997, 34.721334] + : [113.613951, 34.721327] // 默认中心点 + }); + + // 添加地图控件 + this.bigMap.addControl(new AMap.Scale()); + this.bigMap.addControl(new AMap.ToolBar()); + this.bigMap.addControl(new AMap.ControlBar()); + this.bigMap.addControl(new AMap.HawkEye({isOpen: true})); + this.bigMap.addControl(new AMap.MapType()); + + // 初始化地点搜索服务 + this.placeSearch = new AMap.PlaceSearch({ + map: this.bigMap, + pageSize: 5, + pageIndex: 1, + citylimit: true + }); + + // 初始化定位服务 + this.geolocation = new AMap.Geolocation({ + enableHighAccuracy: true, // 是否使用高精度定位 + timeout: 10000, // 超时时间 + buttonPosition: 'RB', // 定位按钮位置 + buttonOffset: new AMap.Pixel(10, 20), // 定位按钮偏移 + zoomToAccuracy: true // 定位成功后是否自动调整视野 }); + this.bigMap.addControl(this.geolocation); // 添加标记（如果已有坐标） if (this.form.longitude && this.form.latitude) { - new AMap.Marker({ + this.marker = new AMap.Marker({ position: [parseFloat(this.form.longitude), parseFloat(this.form.latitude)], - map: this.bigMap + map: this.bigMap, + draggable: true // 可拖动 + }); + + // 监听标记拖动事件 + this.marker.on('dragend', (e) => { + this.selectedPosition = { + lng: e.lnglat.getLng(), + lat: e.lnglat.getLat() + }; }); } @@ -385,9 +452,25 @@ export default { lng: e.lnglat.getLng(), lat: e.lnglat.getLat() }; - new AMap.Marker({ // 实时更新标记 + + // 清除旧标记 + if (this.marker) { + this.marker.setMap(null); + } + + // 添加新标记 + this.marker = new AMap.Marker({ position: [this.selectedPosition.lng, this.selectedPosition.lat], - map: this.bigMap + map: this.bigMap, + draggable: true + }); + + // 监听标记拖动事件 + this.marker.on('dragend', (e) => { + this.selectedPosition = { + lng: e.lnglat.getLng(), + lat: e.lnglat.getLat() + }; }); }); @@ -397,25 +480,98 @@ export default { } }, + // 搜索地点 + handleSearch() { + if (!this.searchKeyword.trim()) { + this.$message.warning('请输入搜索关键词'); + return; + } + + if (this.placeSearch) { + this.placeSearch.search(this.searchKeyword, (status, result) => { + if (status === 'complete' && result.poiList.pois.length) { + const firstResult = result.poiList.pois[0]; + this.selectedPosition = { + lng: firstResult.location.lng, + lat: firstResult.location.lat + }; + + // 清除旧标记 + if (this.marker) { + this.marker.setMap(null); + } + + // 添加新标记 + this.marker = new AMap.Marker({ + position: [this.selectedPosition.lng, this.selectedPosition.lat], + map: this.bigMap, + draggable: true + }); + + // 移动到搜索结果 + this.bigMap.setCenter([this.selectedPosition.lng, this.selectedPosition.lat]); + + // 监听标记拖动事件 + this.marker.on('dragend', (e) => { + this.selectedPosition = { + lng: e.lnglat.getLng(), + lat: e.lnglat.getLat() + }; + }); + } else { + this.$message.warning('未找到相关地点'); + } + }); + } + }, + + // 定位当前位置 + locateCurrentPosition() { + if (this.geolocation) { + this.geolocation.getCurrentPosition((status, result) => { + if (status === 'complete') { + this.selectedPosition = { + lng: result.position.lng, + lat: result.position.lat + }; + + // 清除旧标记 + if (this.marker) { + this.marker.setMap(null); + } + + // 添加新标记 + this.marker = new AMap.Marker({ + position: [this.selectedPosition.lng, this.selectedPosition.lat], + map: this.bigMap, + draggable: true + }); + + // 移动到当前位置 + this.bigMap.setCenter([this.selectedPosition.lng, this.selectedPosition.lat]); + + // 监听标记拖动事件 + this.marker.on('dragend', (e) => { + this.selectedPosition = { + lng: e.lnglat.getLng(), + lat: e.lnglat.getLat() + }; + }); + } else { + this.$message.error('定位失败: ' + result.message); + } + }); + } + }, + confirmLocation() { if (this.selectedPosition) { this.form.longitude = this.selectedPosition.lng.toString(); this.form.latitude = this.selectedPosition.lat.toString(); this.mapDialogVisible = false; - } - }, - - // 在大地图上显示标记 - showMarkerOnBigMap(position) { - if (this.marker) { - this.marker.setPosition(position); } else { - this.marker = new AMapLoader.Marker({ - position: position, - map: this.bigMap - }); + this.$message.warning('请先选择位置'); } - this.bigMap.setCenter(position); }, } }; -- 2.22.0