diff --git a/src/assets/mapUtils/map.ts b/src/assets/mapUtils/map.ts
index 5087991..b654ed5 100644
--- a/src/assets/mapUtils/map.ts
+++ b/src/assets/mapUtils/map.ts
@@ -304,6 +304,7 @@ export const Map = {
label: {
content: isFunction(extData?.content) && extData?.content(result[i]),
},
+ zIndex: 99,
...extData?.extOption,
});
arr.push(startMarker);
@@ -460,6 +461,16 @@ export const Map = {
});
this.infoWindow.open(this.map);
},
+ createEmerInfoModal({ option, content }, flag = true) {
+ let { latitude, longitude } = option;
+ this.infoWindow = new AMap.InfoWindow({
+ position: [longitude, latitude],
+ offset: new AMap.Pixel(0, -8),
+ content: content,
+ closeWhenClickMap: flag,
+ });
+ this.infoWindow.open(this.map);
+ },
clearInfoModal() {
if (this.infoWindow) {
this.infoWindow?.setMap(null);
@@ -582,7 +593,7 @@ export const Map = {
/**
* @desc 创建应急人员Marker
*/
- createEmergencyMarker(option) {
+ createEmergencyMarker(option: any, isLabel = true, callback?: Callback) {
this.clearEmergencyMarker();
const { sex, address, name, position } = option;
const icon = sex == '1' ? female : male;
@@ -590,15 +601,24 @@ export const Map = {
position: position,
icon: createIcon({ icon: watchIconR, iconSize: [80, 80], imageSize: [80, 80] }),
offset: new AMap.Pixel(-40, -40), //设置偏移量
- label: {
- content: `
+ ...(isLabel
+ ? {
+ label: {
+ content: `
`,
- offset: new AMap.Pixel(-120, -70),
- },
+ offset: new AMap.Pixel(-120, -70),
+ },
+ }
+ : {}),
});
this.map.add(this.emergencyMarker);
+ this.emergencyMarker.on('click', () => {
+ if (callback && isFunction(callback)) {
+ callback(option);
+ }
+ });
// this.setZoomCenter(position);
},
/**
diff --git a/src/views/indexSun.vue b/src/views/indexSun.vue
index 77d2954..00c06a5 100644
--- a/src/views/indexSun.vue
+++ b/src/views/indexSun.vue
@@ -121,6 +121,7 @@
centerMapFromList,
columns,
contactListColumns,
+ createEmerInfo,
fromLists,
infoContentSpecial,
monitorColumns,
@@ -476,7 +477,12 @@
address: res,
sex: data.sex,
};
- Map.createEmergencyMarker(option);
+ option['latitude'] = option.lat;
+ option['longitude'] = option.lon;
+ Map.createEmerInfoModal({ option, content: createEmerInfo(option) }, false);
+ Map.createEmergencyMarker(option, false, (val: any) => {
+ Map.createEmerInfoModal({ option: val, content: createEmerInfo(val) }, false);
+ });
Map.map.setFitView([...arr, Map.emergencyMarker], false, [180, 180, 180, 180]);
})
.catch((err: any) => {
diff --git a/src/views/indexSun/centerMap.vue b/src/views/indexSun/centerMap.vue
index 7f795c5..27507bf 100644
--- a/src/views/indexSun/centerMap.vue
+++ b/src/views/indexSun/centerMap.vue
@@ -1004,4 +1004,16 @@
.no-top {
top: 50px !important;
}
+
+ :deep(.emer-content) {
+ width: 200px;
+ padding: 6px 10px 10px;
+
+ > div {
+ &:nth-child(1) {
+ text-align: center;
+ padding-bottom: 5px;
+ }
+ }
+ }
diff --git a/src/views/indexSun/indexSun.ts b/src/views/indexSun/indexSun.ts
index e536f32..04a9455 100644
--- a/src/views/indexSun/indexSun.ts
+++ b/src/views/indexSun/indexSun.ts
@@ -278,6 +278,15 @@ export function infoContentSpecial(res: any) {
`;
}
+
+export function createEmerInfo(res: any) {
+ const { address, name } = res;
+ return `