vue-amap点击Marker弹出window窗口显示Marker信息

1. script

let windows = [];//window窗体
let nodes0 = []; //防爆物资 burstPrevention - 点
for (var i = 0; i < mapData.length; i++) {
    mapData[i].key = i;//index值
    mapData[i].content = '<div style="margin-top: 16px;text-align:center; background-color:         #ff5100b3; height: 24px; width: 24px; border: 0; border-radius: 12px;"></div>';
//click事件
    mapData[i].events= {
        click: (e)=>{
                        // console.log("getExtData",e.target.getExtData());
                        this.windows.forEach(window => {
                            //隐藏所有窗体
                            window.visible = false;
                        });
                        //显示点击窗体
                        this.currentWindow = this.windows[e.target.getExtData().key];
                        this.$nextTick(() => {
                            this.currentWindow.visible = true;
                        });
                    }
                };
        let contentWindow = `<ul style="margin: 0;" class="prompt">
                    <li>物资名称:`+(mapData[i].CONTINGENC_RES_NAME||"")+`</li>
                    <li>物资类型:`+(mapData[i].RES_TYPE_NAME||"")+`</li>
                    <li>物资等级:`+(mapData[i].RES_LEVEL_NAME||"")+`</li>
                    <li>存放位置:`+(mapData[i].RES_PLACE||"")+`</li></ul>`
                windows.push({
                    position: mapData[i].lnglat,
                    content: contentWindow,
                    visible: false
                });
}
this.windows = windows;
this.nodes0 = nodes0;

2.template

<!-- map -->
<el-amap vid="amapDemo" mapStyle="light" :center="center" :features="['bg', 'road']" class="amap-demo">
                <el-amap-marker
                v-for="(item, index) in nodes0"
                :key="'node0'+ index"
                :position="item.lnglat"
                topWhenClick="true"
                :extData="item"
                :content ="item.content"
                :title="item.title"
                :events="item.events"
                ></el-amap-marker>
                <el-amap-info-window
                 v-if="currentWindow"
                 :position="currentWindow.position" 
                 :visible="currentWindow.visible" 
                 :content="currentWindow.content">
                 </el-amap-info-window>
          </el-amap>

觉得有用赞一个,谢谢你!

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页