通过 vue-amap 使用高德地图 InfoWindow

一、信息窗体实例

<template>
   <el-amap>
       <el-amap-info-window
           v-if="boatWindow"
           :position="boatWindow.position"
           :visible="boatWindow.visible"
           :content="boatWindow.content"
           :events="boatWindow.events"
           :auto-move="true"
           :is-custom="true"
           :close-when-click-map="true"
       />
   </el-amap>
</template>
<script>
export default {
   data(){
       return{
           // 信息窗体
           boatWindows: [],
           boatWindow: {},
           //相同的属性
           boatWindowContent: {
               checked: false,
               imgSrc: require('@/assets/icon/white.svg'),
               targetId: ''
           },
       }
   },
   created() {
       window.showBoatPolyline = this.showBoatPolyline // content 中的点击事件方法
   },
   methods:{
       // 创建一个信息窗体
       creatBoatWindow(boatdata, lnglat) { 
           ...
       },
       // 显示信息弹窗
       showBoatWindow(boatid, lnglat) { 
           ...
       },
       showBoatPolyline(checkbox, id){
           ...
       }
   }
}
</script>

二、创建信息窗体

 creatBoatWindow(boatdata, lnglat) {
    const windows = []
    const self = this
    const imgSrc = self.boatWindowContent.imgSrc    // content 中的 imgSrc 变量
    windows.push({
        position: lnglat,
        visible: true,
        events: {
            close() {}
        },
        content:
            `<div style="color:white;width:400px;background-color:rgba(7,25,54,0.6);padding: 0 0 10px 0">
                <h3 style="background-color:#071936;padding:10px;">实时信息</h3>
                <p style="margin:0 0 10px 10px;"><strong>名称：</strong>${boatdata.targetId}</p>
                <p style="margin:0 0 10px 10px;">
                    <span style="width:200px;display:inline-block"><strong>IMO：</strong>${boatdata.mmsi}</span>
                    <span><strong>呼号：</strong>${boatdata.radarId}</span>
                </p>
                <input type="checkbox" onclick="showBoatPolyline(this,'${boatdata.targetId}')" style="margin:0 0 10px 10px;"> 轨迹</input>
                <p style="margin:0 0 0 10px;">
                    <span style="width:200px;display:inline-block">
                        <img src="${imgSrc}" width="20px" height="20px">
                    </span>
                </p>
            </div>`
    })
    this.boatWindow = windows[0]
},

三、显示信息窗体

showBoatWindow(boatid, lnglat) { // 显示信息弹窗
    const self = this
    if (self.boatWindow.visible) {
        self.boatWindow.visible = false // 改变弹窗的状态
    }
    self.$api.detail('/web/ferry/item', boatid).then(res => {
        if (!res.data || !res.data.targetId) {
            console.warn('小船数据为空:', res.data)
            this.$message({
                message: '小船数据为空',
                center: true
            })
            // 假数据
            self.creatBoatWindow({ targetId: boatid, state: '1', course: '30.904352', latitude: '19.966098', longitude: '109.76247' }, lnglat)
            return
        }
        self.creatBoatWindow(res.data, lnglat)
    })
},

四、在海量标点事件中创建信息窗体

init(o) {
    lazyAMapApiLoaderInstance.load().then(() => {
        ...
        massMarks.on('click', (e) => {
            self.showBoatWindow(e.data.targetId, [e.data.lnglat.lng, e.data.lnglat.lat])
        })
        ...
    })
}

五、vue 中使用代码拼接

变量：

<p ><strong>名称：</strong>${boatdata.targetId}</p>

加载图片：

//定义图片
data(){
    return{  
        boatWindowContent: {
            imgSrc: require('@/assets/icon/white.svg'),
        },
    }
},
methods:{
    // 创建一个信息窗体
    creatBoatWindow(boatdata, lnglat) { 
        ...
        const imgSrc = self.boatWindowContent.imgSrc //转换  
        ...
        content:`<img src="${imgSrc}" width="20px" height="20px">`
    }
}

方法：

created() {
    window.showBoatPolyline = this.showBoatPolyline //content中的点击事件方法
},
methods:{
    creatBoatWindow(boatdata, lnglat) { 
        ...
        content:`<input type="checkbox" onclick="showBoatPolyline(this,'${boatdata.targetId}')"> 轨迹</input>`
        ...
    },
    showBoatPolyline(checkbox, id){
        ...
    }
}

选择框：

methods:{
    showBoatPolyline(checkbox, id){
        ...
        if (checkbox.checked) {
            //do something
        } else {
           //do something
        }
    }
}

参考链接: vue-amap 信息窗体