vue-amap点击Marker弹出window窗口显示Marker信息
作者：zeke | 时间：Dec 11, 2024 3:12:45 PM | 访问量：1
<p></p><p><strong>1. script</strong></p><pre class="ql-syntax" spellcheck="false">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;
</pre><p><span style="background-color: rgba(220, 220, 220, 0.5);"><img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" height="15" width="15"></span></p><p><strong>2.template</strong></p><pre class="ql-syntax" spellcheck="false"><!-- 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>
</pre><p><span style="background-color: rgba(220, 220, 220, 0.5);"><img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" height="15" width="15"></span></p><p>觉得有用赞一个，谢谢你！</p><p></p>