パラメータを使用してイベントを書き込むためのjsスプライシングテンプレート文字列

パラメータを使用してイベントを書き込むためのjsスプライシングテンプレート文字列

Gaodeマップのポップアップウィンドウに書き込みました。パラメータを1つだけ渡しました(オブジェクトを文字列に変換すると、エラーが報告されます(エスケープする必要があります)ので、パラメータを1つだけ渡しました。 )クリックマークを監視する方法を書き込む方法があります。そうでない場合は有効になりません。

if (v.hasEquipment && v.equipmentList && v.equipmentList.length > 0) {
                            let bdpoint = this.bdencrypt(v.longitude, v.latitude) // 坐标转换
                            let point = new BMapGL.Point(...bdpoint)
                            pointArr.push(point)
                            let marker = new BMapGL.Marker(point, {
                                icon: myIcon1
                            });
                            map.addOverlay(marker); // 绘制点坐标
                            let pamsList = ``
                            let atr = ''
                            v.equipmentList.forEach((item, index) => {
                                atr = JSON.stringify(item)
                                if (item.status === '0') {
                                    this.normalEquipmentData.push({name:item.equipmentName,id:item.id})
                                    this.zcsb++
                                    pamsList += `
                                    <tr>
                                    <th align="center">${index+1}</th>
                                    <th align="center">${item.equipmentName}</th>
                                    <th align="center" style="color: #30DA74">正常</th>
                                    <th align="center" ><input id="btn" style="width: 60px;margin: 5px 0" type="button" value="详情" onclick="btnDetail('${item.id}')" /></th>
                                    </tr>
                                    `
                                }else {
                                    this.abnormalEquipmentData.push({name:item.equipmentName,id:item.id})
                                    this.ycsb++
                                    pamsList += `
                                    <tr>
                                    <th align="center">${index+1}</th>
                                    <th align="center">${item.equipmentName}</th>
                                    <th align="center" style="color: #F56580">异常</th>
                                    <th align="center" ><input id="btn" style="width: 60px;margin: 5px 0"  type="button" value="详情" onclick="btnDetail('${item.id}')" /></th>
                                    </tr>
                                    `
                                }

                            })
                            let inner = `
                            <p style="padding: 10px 0">站点名称:${v.name}</p>
                            <table width="380" border="1" style="border-collapse: collapse;">
                            <tr>
                            <th align="center">序号</th>
                            <th align="center">设备名称</th>
                            <th align="center">状态</th>
                            <th align="center">操作</th>
                            ${pamsList}
                            </table>
                            `
                            let infoWindow = new BMapGL.InfoWindow(inner, this.opts); // 创建信息窗口对象
                            marker.addEventListener('click', () => {
                                map.openInfoWindow(infoWindow, point); // 开启信息窗口
                                // 图片加载完毕重绘infoWindow
                                // document.getElementById('imgDemo').onload = function () {
                                //     infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小,导致图片部分被隐藏
                                // };
                                window.btnDetail =(i)=> {
                                    // this.detailEquipmentData = v.equipmentList[i]
                                    let id = i
                                    console.log(id)
                                    
                                    this.detailEquipmentFlag = true

                                    // console.log(v.equipmentList[i])
                                    // console.log(this.normalEquipmentFlag)
                                }
                            });
                        }

 

おすすめ

転載: blog.csdn.net/qq706352062/article/details/111634496