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

深藏阁楼爱情的钟 2023-07-05 05:28 20阅读 0赞

**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**

<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>

觉得有用赞一个，谢谢你！

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关 leaflet 选择一个marker，点击后设置其为中心点（070）

![在这里插入图片描述][804c6d40d4d24c23bc0d621973afeef0.png_pic_center] 第070个 [点击查看专栏目录][Link 1]

淡淡的烟草味﹌/ 2024年03月27日 17:36/ 0 赞/ 81 阅读

相关 leaflet 点击marker，实现跳跃的动画效果（104）

![在这里插入图片描述][804c6d40d4d24c23bc0d621973afeef0.png_pic_center] 第104个 [点击查看专栏目录][Link 1]

Myth丶恋晨/ 2024年03月26日 17:06/ 0 赞/ 73 阅读

相关 Leaflet中使用awesome-markers插件显示带图标的marker

场景 Vue+Leaflet实现加载OSM显示地图： [Vue+Leaflet实现加载OSM显示地图\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客]

素颜马尾好姑娘i/ 2023年10月01日 12:27/ 0 赞/ 64 阅读

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

1. script let windows = [];//window窗体 let nodes0 = []; //防爆物资 burstPrevention -

深藏阁楼爱情的钟/ 2023年07月05日 05:28/ 0 赞/ 21 阅读

相关点击按钮触发事件弹出 div 小窗口

首先设置配置mydialog.css @charset "utf-8"; .black_overlay{ display:

比眉伴天荒/ 2023年06月19日 02:56/ 0 赞/ 20 阅读

相关 jquery点击div弹出新窗口

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9i

逃离我推掉我的手/ 2022年10月25日 01:35/ 0 赞/ 270 阅读

相关百度地图Marker隐藏/显示

1. 隐藏Marker function hiddenMarker(eventtype)\{ var allOverlay = map.getOverlays(); f

迈不过友情╰/ 2022年06月14日 06:55/ 0 赞/ 1087 阅读

相关百度地图 Marker 点击弹出窗口

Android 百度地图 SDK v3.0.0 添加覆盖物Marker与InfoWindow的使用我们先看效果图片： ![100f0d41-be00-

青旅半醒/ 2022年04月12日 12:27/ 0 赞/ 957 阅读

相关页面点击预览按钮弹出图片窗口

jsp： <script type="text/javascript" src="$\{ctx \}/resources/javascript/imageView.js">

墨蓝/ 2022年01月21日 03:41/ 0 赞/ 623 阅读

相关 uni-app 地图标记点循环显示所有marker

<template> //uniapp 地图插件引入 <view class="uni-common-mt" style="margin:0">

你的名字/ 2021年09月07日 06:06/ 2 赞/ 2512 阅读