模板字符串动态添加属性及添加方法

freya_Du

已于 2023-07-10 10:09:23 修改

阅读量471

点赞数

文章标签：前端 javascript linux

于 2023-07-10 10:07:31 首次发布

本文链接：https://blog.csdn.net/freya_Du/article/details/131632586

版权

模板字符串动态添加属性及添加方法

this.LatestPoint = new AMap.Marker({
              position: [this.LatestData.lon, this.LatestData.lat],
              icon: require('@/assets/green2.png'),
              offset: new AMap.Pixel(-18, -41),
              extData: this.LatestData,
              title: 'title'
            })
            this.LatestPoint.on('click', e => {
              const tempColor = `color${this.color}` // 动态修改class类名
              const info = e.target.De.extData
              // 点击展示详情框
              this.infoWindow = new window.AMap.InfoWindow({
                isCustom: true,
                content: null,
                autoMove: true,
                closeWhenClickMap: true,
                offset: new AMap.Pixel(16, -45)
              })
                var content = `<div style="position:relative;min-width: 20vw;height:24vh;background: #fff;border-radius: 5px;border: 1px solid #ccc;">
                <div style="height: 4vh;padding: 1vh;color: #000;font-size: 18px;"><span class="${tempColor}">${
                  this.queryMapData.vehicleNo
                }</span>
                <span style="font-size:12px;display:inline-block;background:#87d068;padding: 1px 8px;border-radius: 5px;margin-left: 18px;">${
                  info.vehState
                }</span>
                <span style="display:inline-block;margin-right: 5px;float:right;cursor:pointer" οnclick='closeInfo()' >x</span>
                </div>
                <hr color="#e8e8e8" width="100%">
                <div style="margin-top: 1.5vh;padding:0.2vh 1vh;"><span style="width:6vw;display: inline-block;text-align: right;padding-right: 10px;font-weight: 700;">上报时间：</span>${info.positiontime}</div>
                <div style="padding:0.2vh 1vh;"><span style="width:6vw;display: inline-block;text-align: right;padding-right: 10px;font-weight: 700;">车速：</span>${info.speed}km/h</div>
                <div style="padding:0.2vh 1vh;"><span style="width:6vw;display: inline-block;text-align: right;padding-right: 10px;font-weight: 700;">当前位置：</span>${info.address}</div>
                
                <div style="padding:0.2vh 1vh;"><span style="width:6vw;display: inline-block;text-align: right;padding-right: 10px;font-weight: 700;">车辆类型：</span>${info.vehType}</div>
                <div style="padding:0.2vh 1vh;"><span style="width:6vw;display: inline-block;text-align: right;padding-right: 10px;font-weight: 700;">当前行驶区县：</span>${info.belongPlace}</div>
                <div style="padding:0.2vh 1vh;padding-bottom:1vh"><span style="width:6vw;display: inline-block;text-align: right;padding-right: 10px;font-weight: 700;">车辆定位信息：</span>(${info.lon.toFixed(6) + ',' + info.lat.toFixed(6)}) </div>
                </div>`
              
              this.infoWindow.setContent(content)
              window.closeInfo = (e) => {
                // 关闭信息弹框
                this.infoWindow.close()
              }
              this.infoWindow.open(this.map, e.target.getPosition())
            })