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

深藏阁楼爱情的钟 2023-07-05 05:28 1阅读 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 条评论，1人围观）

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

相关阅读

相关 leaflet中将地址转换为坐标，弹出marker（示例代码044）

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

ゝ一纸荒年。/ 2024年03月30日 12:18/ 0 赞/ 59 阅读

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

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

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

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

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

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

相关 jquery点击div弹出新窗口

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JjYm9i

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

相关【Javascript】模拟弹出windows窗口

以下例子的内容已经忘了在哪里拿到的例子了，文章发布时先写成“原创”内容，若涉及到侵权行为，请作者主动联系我进行删除，谢谢。 <!DOCTYPE html PUBLIC

本是古典何须时尚/ 2022年07月24日 03:19/ 0 赞/ 177 阅读

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

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

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

相关 java marker interface

marker interface是一种特殊的接口，这种接口没有任何属性或者方法，java开发者最常用的marker interface应该当属Serializable了，当一个

忘是亡心i/ 2022年04月23日 02:54/ 0 赞/ 168 阅读

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

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

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

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

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

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

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

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

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