1、在地图上打点，并定义 click 事件

/**
 * 地图上打点，并定义click事件
 * @param map map对象
 * @param imgUrl  图像的url地址
 * @param data 数据信息
 * @param onclick 回调函数
 * @returns {AMap.Marker} 返回一个marker对象
 */
export function createTrafficEventMarker(map, imgUrl, data, onclick) {
    let position = wgs84togcj02(data.lon, data.lat);
    let tmpMap = map
    let lon = position[0]
    let lat = position[1]
    let tmpImgShow = imgUrl + 'event_up.png'

    //事件信息 后续数据 地图打点
    let eventMark = new AMap.Marker({
        map: tmpMap,
        position: [lon, lat],
        anchor: 'center',
        // cursor: 'default',
        zooms: [1, 20],
        extData: {
            eventId: data.eventId
        },
        content: '<div style="display:flex;flex-direction: column;justify-content: center;align-items: center;">' +
            '<div style="background: red;font-size: ' + fontSize.f14 + 'px;width: ' + fontSize.f100 + 'px;display:flex;justify-content: center;align-items: center;border-radius: ' + fontSize.f4 + 'px;">' +
            '<div style="padding: ' + fontSize.f4 + 'px;">' + data.eventName + '</div>' +
            '</div>' +
            '<img style="width: ' + fontSize.f24 + 'px;height: ' + fontSize.f36 + 'px;"  src=' + tmpImgShow + '>' +
            '</div>',
    })
    // 设置marker鼠标为默认箭头样式
    // eventMark.setCursor('default')
    eventMark["layerType"] = 'trafficEvent';
    eventMark.on('click', () => {
        map.setCenter([lon, lat])
        onclick(eventMark)
    })

    return eventMark;
}

2、数据由websocket订阅，后台实时推送

// 初始化所有的生效事件图标
            initValidEventList() {
                getValidEventList({regionId: this.$store.state.region.regionCode}).then(res => {
                    if (res.code === 0) {
                        if (res.data.length > 0) {
                            res.data.forEach(item => {
                                let eventMarker = createTrafficEventMarker(this.map, this.ImgUrl, item, onclick)
                                this.markerList.push(eventMarker)
                            })
                        }
                    }
                })
                // 在此方法内，定义回调函数，进入详情页监听
                window.onclick = (eventMarker) => {
                    if (eventMarker.layerType === 'trafficEvent') {
                        this.$store.state.curClickEventId = eventMarker.getExtData().eventId
                        this.eventDetailVisible = true
                        this.$refs.eventDetailRef.getEventDetail()
                    }
                }
            },

3、实时失效

// 实时失效事件，在地图上消失
            curInvalidEvent(data) {
                let len = data.eventIds.length
                let markerListLen = this.markerList.length
                let listDataLen = this.listData.length
                if (len > 0 && this.markerList.length > 0) {
                    for (let i = 0; i < len; i++) {
                        // 地图上消失已解除状态的图标， 数组删除操作，使用倒序删除
                        for (let j = markerListLen - 1; j >= 0; j--) {
                            if (this.markerList[j].getExtData().eventId === data.eventIds[i]) {
                                this.map.remove(this.markerList[j])
                                this.markerList.splice(j, 1)
                            }
                        }
                        // 修改事件列表中失效书的状态为 已解除
                        for (let k = 0; k < listDataLen; k++) {
                            if (this.listData[k].eventId === data.eventIds[i]) {
                                this.listData[k].eventState = 1
                            }
                        }
                    }
                }
            },