vue 高德地图 给信息窗体添加绑定事件

通过手动挂载 vue 组件实现

import Html from './html'
import Vue from 'vue'

const Constructor = Vue.extend(Html)
const html = new Constructor({ data: { data: item } }).$mount().$el 
 // 信息窗口
    const infoWindow = new AMap.InfoWindow({
        isCustom: true,
        content: html,
        autoMove: true,
        closeWhenClickMap: true,
        offset: [0, -220],
        avoid: true
    })
    infoWindow.open(this.map, _location)

html里就可以随便怎么写方法获取了

<template>
    <div>
        <div class="mapTip">
            <div class="title">视频详情内容</div>
            <div v-html="html"></div>
            <div>
                <el-button
                    size="small"
                    plain
                    @click="onclick"
                >查看模型</el-button>
            </div>
        </div>
        <div class="canvasBox">
            <Canvas
                id="three"
                :row="data"
            />
        </div>
    </div>
</template>
<script>
export default {
    name: 'Map',
    props: {
    },
    data() {
        return {
            html: '',
            data: {}
        }
    },
    computed: {
    },
    mounted() {
        this.html = this.getHtml(this.data)
    },
    methods: {
        onclick() {
            console.log(this.data, 444)
        },
        /**
            * @name: 获取 html
            * @param {*}
            * @return {*}
            */
        getHtml(item) {
            let html = ''
            switch (item.typeRow) {
                case 'video':
                    html = `
                            <ul>
                                <li>站点名:${item.device_name}</li>
                                <li>监控名:${item.name}</li>
                                <li>关联设备:${item.related_device_name}</li>
                                <li>设备序列号:${item.device_serial}</li>
                                <li>在线状态:${item.device_status}</li>
                            </ul>
                            `
                    break
                case 'equipment':
                    html = `
                            <ul>
                                <li>乡村站点名称:${item.name}</li>
                                <li>乡村站点编码:${item.code}</li>
                                <li>芯片ID:${item.bluetooth_id}</li>
                                <li>芯片距离:${item.distance}</li>
                                <li>芯片检测:${item.is_open}</li>
                            </ul>
                                `
                    break
                case 'device':
                    html = `
                            <ul>
                                <li>站点名:${item.site_name}</li>
                                <li>设备名:${item.dev_name}</li>
                                <li>设备标识符:${item.unique_code}</li>
                                <li>监控区名:${item.partition_type}</li>
                            </ul>
                            `
                    break
            }
            return html
        }
    }
}
</script>

<style lang="scss" scoped>
.canvasBox {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    top: 50%;
    background: rgba(0, 0, 0, 0.5);
}
</style>

或者直接用原始的思维 直接给按钮绑定事件.

const clouddata = e.target._originOpts
const item = e.target._originOpts.extData
const _location = [clouddata.position[0], clouddata.position[1]]
const html = this.getHtml(item)
// 信息窗口
const infoWindow = new AMap.InfoWindow({
    isCustom: true,
    content: html,
    autoMove: true,
    closeWhenClickMap: true,
    offset: [0, -60],
    avoid: true
})
infoWindow.open(this.map, _location)
document.getElementById('infoWindow' + item.id).onclick = null
document.getElementById('infoWindow' + item.id).onclick = (e) => {
    this.$emit('mapBack', item)
}