【地图】腾讯地图 - InfoWindow 自定义信息窗口内容时，内容 html 嵌套混乱问题

需求描述

腾讯地图上画点位，点击点位展示弹框信息

问题

问题代码

// 打开弹框
openInfoWindow(position, content) {this.infoWindow = new TMap.InfoWindow({map: this.map,position: new TMap.LatLng(position[0], position[1]),offset: { x: 0, y: -32 }, // 设置信息窗相对position偏移像素content: content})
},// 调用打开弹框方法 ----- 【问题代码】
openInfoWindow([params.latLng.lat, params.latLng.lng], // [39.973865663194346, 116.34780328370698]`<div class="qwdc_card"><div class="qwdc_card_header"><div class="qwdc_card_header_pic iconfont ico-minjing" /><div class="qwdc_card_header_info"><div class="qwdc_card_header_info_name">{{ '张三' }}</div><div class="qwdc_card_header_info_bm">{{ '铁骑中队' }}</div></div></div><div class="qwdc_card_body"><div class="qwdc_card_body_item"><span class="qwdc_card_body_item_label">岗位：</span><span class="qwdc_card_body_item_value">{{ '' || '暂无' }}</span></div><div class="qwdc_card_body_item"><span class="qwdc_card_body_item_label">位置：</span><span class="qwdc_card_body_item_value">{{'测试卫视是在哪里呀就觉得很难受的接口和' || '暂无'}}</span></div><div class="qwdc_card_body_item"><span class="qwdc_card_body_item_label">状态：</span><span class="qwdc_card_body_item_value">{{ '' || '暂无' }}</span></div></div><div class="qwdc_card_btns"><i class="iconfont ico-guijihuifang1" /><i class="iconfont ico-ducha1" /><i class="iconfont ico-ducha" /><i class="iconfont ico-xiaoxituisong" /></div></div>`
)

页面展示

解决

原因

是因为在模板字符串中写了 单标签，地图弹框内容渲染的时候应该时默认双标签渲染，就会不断找双标签的闭合标签，因此造成样式错乱问题

解决办法

将模板字符串中的单标签改为 双标签

解决代码

// 打开弹框
openInfoWindow(position, content) {this.infoWindow = new TMap.InfoWindow({map: this.map,position: new TMap.LatLng(position[0], position[1]),offset: { x: 0, y: -32 }, // 设置信息窗相对position偏移像素content: content})
},// 调用打开弹框方法 ----- 【问题解决代码】
openInfoWindow([params.latLng.lat, params.latLng.lng], // [39.973865663194346, 116.34780328370698]`<div class="qwdc_card"><div class="qwdc_card_header"><div class="qwdc_card_header_pic iconfont ico-minjing"></div><div class="qwdc_card_header_info"><div class="qwdc_card_header_info_name">{{ '张三' }}</div><div class="qwdc_card_header_info_bm">{{ '铁骑中队' }}</div></div></div><div class="qwdc_card_body"><div class="qwdc_card_body_item"><span class="qwdc_card_body_item_label">岗位：</span><span class="qwdc_card_body_item_value">{{ '' || '暂无' }}</span></div><div class="qwdc_card_body_item"><span class="qwdc_card_body_item_label">位置：</span><span class="qwdc_card_body_item_value">{{'测试卫视是在哪里呀就觉得很难受的接口和' || '暂无'}}</span></div><div class="qwdc_card_body_item"><span class="qwdc_card_body_item_label">状态：</span><span class="qwdc_card_body_item_value">{{ '' || '暂无' }}</span></div></div><div class="qwdc_card_btns"><i class="iconfont ico-guijihuifang1"></i><i class="iconfont ico-ducha1"></i><i class="iconfont ico-ducha"></i><i class="iconfont ico-xiaoxituisong"></i></div></div>`
)

页面展示

代码汇总

// 打开弹框
openInfoWindow(position, content) {this.infoWindow = new TMap.InfoWindow({map: this.map,position: new TMap.LatLng(position[0], position[1]),offset: { x: 0, y: -32 }, // 设置信息窗相对position偏移像素content: content})
},// 调用打开弹框方法 ----- 【问题代码】
openInfoWindow([params.latLng.lat, params.latLng.lng], // [39.973865663194346, 116.34780328370698]`<div class="qwdc_card"><div class="qwdc_card_header"><div class="qwdc_card_header_pic iconfont ico-minjing" /><div class="qwdc_card_header_info"><div class="qwdc_card_header_info_name">{{ '张三' }}</div><div class="qwdc_card_header_info_bm">{{ '铁骑中队' }}</div></div></div><div class="qwdc_card_body"><div class="qwdc_card_body_item"><span class="qwdc_card_body_item_label">岗位：</span><span class="qwdc_card_body_item_value">{{ '' || '暂无' }}</span></div><div class="qwdc_card_body_item"><span class="qwdc_card_body_item_label">位置：</span><span class="qwdc_card_body_item_value">{{'测试卫视是在哪里呀就觉得很难受的接口和' || '暂无'}}</span></div><div class="qwdc_card_body_item"><span class="qwdc_card_body_item_label">状态：</span><span class="qwdc_card_body_item_value">{{ '' || '暂无' }}</span></div></div><div class="qwdc_card_btns"><i class="iconfont ico-guijihuifang1" /><i class="iconfont ico-ducha1" /><i class="iconfont ico-ducha" /><i class="iconfont ico-xiaoxituisong" /></div></div>`
)// 调用打开弹框方法 ----- 【问题解决代码】
openInfoWindow([params.latLng.lat, params.latLng.lng], // [39.973865663194346, 116.34780328370698]`<div class="qwdc_card"><div class="qwdc_card_header"><div class="qwdc_card_header_pic iconfont ico-minjing"></div><div class="qwdc_card_header_info"><div class="qwdc_card_header_info_name">{{ '张三' }}</div><div class="qwdc_card_header_info_bm">{{ '铁骑中队' }}</div></div></div><div class="qwdc_card_body"><div class="qwdc_card_body_item"><span class="qwdc_card_body_item_label">岗位：</span><span class="qwdc_card_body_item_value">{{ '' || '暂无' }}</span></div><div class="qwdc_card_body_item"><span class="qwdc_card_body_item_label">位置：</span><span class="qwdc_card_body_item_value">{{'测试卫视是在哪里呀就觉得很难受的接口和' || '暂无'}}</span></div><div class="qwdc_card_body_item"><span class="qwdc_card_body_item_label">状态：</span><span class="qwdc_card_body_item_value">{{ '' || '暂无' }}</span></div></div><div class="qwdc_card_btns"><i class="iconfont ico-guijihuifang1"></i><i class="iconfont ico-ducha1"></i><i class="iconfont ico-ducha"></i><i class="iconfont ico-xiaoxituisong"></i></div></div>`
)

.qwdc_card {width: 300px;background-color: #fff;padding: 10px;text-align: left;.text_jb {background: linear-gradient(to bottom, #49befe, #3783fe); /* 从左到右渐变 */-webkit-background-clip: text; /* Safari/Chrome支持该属性 */color: transparent; /* 将文本颜色设置为透明 */}&_header {display: flex;margin-bottom: 5px;&_pic {$height: 50px;width: 40px;height: $height;margin-right: 10px;border: 1px solid #00a4ff;border-radius: 3px;background: linear-gradient(180deg, #fff, rgba(0, 121, 254, 0.07) 97%);text-align: center;&.iconfont {line-height: $height;font-size: 30px;color: #388bfd;// @extend .text_jb;}}&_info {flex: 1;&_name {// margin-bottom: 5px;font-size: 18px;color: #7f7f7f;}&_bm {color: #d7d7d7;}}}&_body {&_item {margin-bottom: 5px;display: flex;&_label {color: #7f7f7f;}&_value {flex: 1;white-space: pre-wrap;color: #aaaaaa;}}}&_btns {padding-top: 10px;border-top: 1px solid #f2f2f2;i {margin: 0 5px;cursor: pointer;font-size: 16px;// color: #388bfd;@extend .text_jb;}}
}

注

贴图中文字溢出、空格换行、模板字符串{{}} 等问题不必在意，模板字符串代码是从 html 标签内cv的