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: `
${name}
${address}
`, - 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 `
+
${name}
+
${address}
+
`; +} + const columns1 = [ { title: '姓名',