vue-amap点击Marker弹出window窗口显示Marker信息
1. scriptlet windows = [];//window窗体let nodes0 = []; //防爆物资 burstPrevention - 点for (var i = 0; i < mapData.length; i++) {mapData[i].key = i;//index值mapData[i].content = '<div styl...
·
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>
觉得有用赞一个,谢谢你!
更多推荐
已为社区贡献1条内容
所有评论(0)