Skip to content

P
property-management
Commit be43ae37 authored by 刘帅's avatar 刘帅
Browse files
Options

1.优化

parent 42665490
Show whitespace changes
Inline Side-by-side
Showing with 307 additions and 22 deletions
propertyManagement-ui/.env.production
View file @ be43ae37
...@@ -4,8 +4,8 @@ VUE_APP_TITLE = 利龙物业后台管理系统 ...@@ -4,8 +4,8 @@ VUE_APP_TITLE = 利龙物业后台管理系统
# 生产环境配置 # 生产环境配置
ENV = 'production' ENV = 'production'
# Fastbuild管理平台/生产环境 # 利龙物业管理平台/生产环境
VUE_APP_BASE_API = '/prod-api' VUE_APP_BASE_API = 'https://admin.llwygl.com/prod-api'
# 应用访问路径 例如使用前缀 /admin/ # 应用访问路径 例如使用前缀 /admin/
VUE_APP_CONTEXT_PATH = '/' VUE_APP_CONTEXT_PATH = '/'
......
propertyManagement-ui/src/views/business/community/gaode/index.vue 0 → 100644
View file @ be43ae37
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>默认点标记</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,
body,
#container {
height: 100%;
width: 100%;
}
.amap-icon img,
.amap-marker-content img {
width: 25px;
height: 34px;
}
.marker {
position: absolute;
top: -20px;
right: -118px;
color: #fff;
padding: 4px 10px;
box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
white-space: nowrap;
font-size: 12px;
font-family: "";
background-color: #25A5F7;
border-radius: 3px;
}
.input-card {
width: 18rem;
z-index: 170;
}
.input-card .btn {
margin-right: .8rem;
}
.input-card .btn:last-child {
margin-right: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="input-card">
<label style="color:grey">点标记操作</label>
<div class="input-item">
<input type="button" class="btn" onclick="addMarker()" value="添加点标记">
<input type="button" class="btn" onclick="updateIcon()" value="更新点标记图标">
</div>
<div class="input-item">
<input type="button" class="btn" onclick="clearMarker()" value="删除点标记">
<input type="button" class="btn" onclick="updateContent()" value="更新点标记内容">
</div>
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=ed6cc1d37c6db81aac6d65c9d7d1b4d8"></script>
<script type="text/javascript">
let marker, map = new AMap.Map("container", {
resizeEnable: true,
center: [116.397428, 39.90923],
zoom: 13
});
// 实例化点标记
function addMarker() {
if (!marker) {
marker = new AMap.Marker({
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
position: [116.406315, 39.908775],
offset: new AMap.Pixel(-13, -30)
});
marker.setMap(map);
}
}
function updateIcon() {
marker.setIcon('//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png')
}
function updateContent() {
if (!marker) {
return;
}
// 自定义点标记内容
const markerContent = document.createElement("div");
// 点标记中的图标
const markerImg = document.createElement("img");
markerImg.className = "markerlnglat";
markerImg.src = "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
markerImg.setAttribute('width', '25px');
markerImg.setAttribute('height', '34px');
markerContent.appendChild(markerImg);
// 点标记中的文本
const markerSpan = document.createElement("span");
markerSpan.className = 'marker';
markerSpan.innerHTML = "Hi，我被更新啦！";
markerContent.appendChild(markerSpan);
marker.setContent(markerContent); //更新点标记内容
marker.setPosition([116.391467, 39.927761]); //更新点标记位置
}
// 清除 marker
function clearMarker() {
if (marker) {
marker.setMap(null);
marker = null;
}
}
</script>
</body>
</html>
propertyManagement-ui/src/views/business/community/index.vue
View file @ be43ae37
...@@ -147,9 +147,20 @@ ...@@ -147,9 +147,20 @@
</div> </div>
</el-dialog> </el-dialog>
<!-- 地图选择对话框 --> <!-- 地图选择对话框 - 已优化 -->
<el-dialog title="选择位置" :visible.sync="mapDialogVisible" width="80%" append-to-body> <el-dialog title="选择位置" :visible.sync="mapDialogVisible" width="80%" append-to-body>
<div id="big-map-container" style="width: 100%; height: 500px;"></div> <!-- <div style="margin-bottom: 10px;">-->
<!-- <el-input-->
<!-- v-model="searchKeyword"-->
<!-- placeholder="请输入地点名称进行搜索"-->
<!-- clearable-->
<!-- style="width: 300px; margin-right: 10px;"-->
<!-- @keyup.enter.native="handleSearch"-->
<!-- />-->
<!-- <el-button type="primary" @click="handleSearch">搜索</el-button>-->
<!-- <el-button @click="locateCurrentPosition" v-if="supportGeolocation">定位当前位置</el-button>-->
<!-- </div>-->
<div id="big-map-container" style="width: 100%; height: 500px;" />
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="mapDialogVisible = false">取消</el-button> <el-button @click="mapDialogVisible = false">取消</el-button>
<el-button type="primary" @click="confirmLocation">确定</el-button> <el-button type="primary" @click="confirmLocation">确定</el-button>
...@@ -223,10 +234,17 @@ export default { ...@@ -223,10 +234,17 @@ export default {
bigMap: null, // 大地图实例 bigMap: null, // 大地图实例
marker: null, // 标记点 marker: null, // 标记点
selectedPosition: null, // 选中的位置 selectedPosition: null, // 选中的位置
// 新增地图搜索相关数据
searchKeyword: '', // 搜索关键词
placeSearch: null, // 地点搜索服务
supportGeolocation: false, // 是否支持定位
geolocation: null, // 定位服务
}; };
}, },
created() { created() {
this.getList(); this.getList();
// 检测浏览器是否支持定位
this.supportGeolocation = 'geolocation' in navigator;
}, },
methods: { methods: {
/** 查询小区列表 */ /** 查询小区列表 */
...@@ -356,26 +374,75 @@ export default { ...@@ -356,26 +374,75 @@ export default {
this.bigMap = null; this.bigMap = null;
} }
// 配置安全密钥（如果启用了）
window._AMapSecurityConfig = {
securityJsCode: '44255e7f71b0344ad567cfcff4c8e381'
};
// 异步加载AMap // 异步加载AMap
const AMap = await AMapLoader.load({ const AMap = await AMapLoader.load({
key: 'ed6cc1d37c6db81aac6d65c9d7d1b4d8', // 替换为你的Key key: 'ed6cc1d37c6db81aac6d65c9d7d1b4d8', // 替换为你的Key
version: '2.0', 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', { this.bigMap = new AMap.Map('big-map-container', {
zoom: 15, zoom: 15,
viewMode: '3D', // 开启3D视图
center: this.form.longitude && this.form.latitude center: this.form.longitude && this.form.latitude
? [parseFloat(this.form.longitude), parseFloat(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) { if (this.form.longitude && this.form.latitude) {
new AMap.Marker({ this.marker = new AMap.Marker({
position: [parseFloat(this.form.longitude), parseFloat(this.form.latitude)], 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 { ...@@ -385,9 +452,25 @@ export default {
lng: e.lnglat.getLng(), lng: e.lnglat.getLng(),
lat: e.lnglat.getLat() 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], 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 { ...@@ -397,25 +480,98 @@ export default {
} }
}, },
confirmLocation() { // 搜索地点
if (this.selectedPosition) { handleSearch() {
this.form.longitude = this.selectedPosition.lng.toString(); if (!this.searchKeyword.trim()) {
this.form.latitude = this.selectedPosition.lat.toString(); this.$message.warning('请输入搜索关键词');
this.mapDialogVisible = false; 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('未找到相关地点');
}
});
} }
}, },
// 在大地图上显示标记 // 定位当前位置
showMarkerOnBigMap(position) { 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) { if (this.marker) {
this.marker.setPosition(position); 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 { } else {
this.marker = new AMapLoader.Marker({ this.$message.error('定位失败: ' + result.message);
position: position, }
map: this.bigMap
}); });
} }
this.bigMap.setCenter(position); },
confirmLocation() {
if (this.selectedPosition) {
this.form.longitude = this.selectedPosition.lng.toString();
this.form.latitude = this.selectedPosition.lat.toString();
this.mapDialogVisible = false;
} else {
this.$message.warning('请先选择位置');
}
}, },
} }
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment