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

已于 2024-06-20 11:11:51 修改
阅读量569 收藏 11
点赞数 12
分类专栏： 项目问题 地图 文章标签： html 前端 数据库
于 2024-03-18 11:08:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53562074/article/details/136802373
版权
文章讲述了在腾讯地图应用中，由于使用了单标签导致弹框内容渲染错误的问题，通过将模板字符串中的单标签修改为双标签解决了样式错乱。开发者提供了解决问题的代码示例。
摘要由CSDN通过智能技术生成

目录

需求描述

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

问题

问题代码

// 打开弹框
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的

Fighting_p
关注
  • 12
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
地图点聚合以及信息弹窗
weixin_45895331的博客
06-08 529
地图点聚合
百度地图类库 自定义信息窗口.zip
07-11
百度地图的infoBox。类似于infoWindow，比infoWindow更有灵活性，比如可以定制border，关闭按钮样式等。 基于Baidu Map API 1.2 。
VUE中天地图自定义窗口 infowindow 类中单击事件指向
m0_50251353的博客
06-06 1214
天地图
vue 腾讯地图api自定义infoWindow信息窗体
qq_41207700的博客
10-29 3729
网上看了大部分关于地图api自定义infoWindow信息窗体类型的文章，有高德的，百度的，天地图啥的，唯独没有腾讯地图的api自定义infoWindow信息窗体。 也不算没有吧，腾讯地图自定义infoWindow信息窗体的content类型是String字符串，用字符串拼接css样式找不到切入点，在行内写样式 可以，但我要更好维护的方式。进入正题：
vue 腾讯地图信息窗体InfoWindow添加onClick事件，及方法传参
最新发布
DDY_18273570119的博客
05-23 339
效果如下。
Vue3前端项目加载使用腾讯地图
子时不睡的博客
12-19 4829
vue3前端项目加载腾讯地图
高德地图 InfoWindow里面添加点击事件
weixin_35752233的博客
02-09 906
在高德地图中，您可以通过使用AMap.InfoWindow类来创建一个信息窗口。您可以使用setContent方法来设置信息窗口内容，并使用open方法打开信息窗口。 下面是一个示例，展示了如何在信息窗口中添加一个点击事件： var infoWindow = new AMap.InfoWindow({ content: '<div onclick="alert(\'Hello Wor...
腾讯地图消息框去背景
cv1002420186的博客
12-11 566
【代码】腾讯地图消息框去背景。
百度地图自定义信息窗体样式
08-25
百度地图自定义信息窗体样式
百度地图类库 自定义信息窗口
04-28
本文将深入探讨“百度地图类库 自定义信息窗口”这一主题，旨在帮助开发者更好地理解和运用这一功能。 首先，我们要理解的是什么是信息窗口（InfoWindow）。在百度地图API中，InfoWindow是一种默认的弹出式窗口，...
高德地图自定义infowindow
04-28
在使用高德地图API开发应用时，自定义`Infowindow`（信息窗口）是一个常见的需求，这可以提升用户体验并使地图展示的信息更加丰富和个性化。`Infowindow`是地图上的一个浮动视图，通常在点击地图上的标记（Marker）...
jQuery的百度地图自定义标注信息代码.zip
07-11
而“jQuery的百度地图自定义标注信息代码”则结合了这两者的功能，提供了在百度地图上自定义标注点并实现交互效果的能力。下面将详细介绍这个压缩包中的知识点。 首先，我们要了解jQuery如何与百度地图API结合。...
Html在何处修改BMap.InfoWindow默认的CSS样式
m0_63762325的博客
03-02 700
BMap.InfoWindow修改的CSS样式添加在HTML何处
腾讯地图api修改信息窗口样式_arcgis api 3.x for js 之echarts开源js库实现地图统计图分析附源码下载...
weixin_39619635的博客
12-02 260
前言关于本篇功能实现用到的 api 涉及类看不懂的，请参照 esri 官网的 arcgis api 3.x for js：esri 官网 api，里面详细的介绍 arcgis api 3.x 各个类的介绍，还有就是在线例子：esri 官网在线例子，这个也是学习 arcgis api 3.x 的好素材。内容概览基于 arcgis api 3.x 结合 echarts 开源 js 库实现地图统计图分析...
自定义百度地图InfoWindow样式
weixin_42252416的博客
08-18 2956
自定义百度地图inforwindow样式及自定义关闭按钮
《前端开发 实践之 腾讯地图API 学习》
yk_ddm的博客
07-12 1111
腾讯地图。
百度地图开发自定义信息窗口openInfoWindow样式的解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
03-07 4387
1.InfoWindow的样式，百度是没用提供直接使用的样式表的，目前都是热心网友在实际开发中自己的经验和实战总结； 2.百度提供了InfoBox富文本标签弹出框的接口，引入InfoBox.js，即可自定义样式或丰富的边框功能，但是鼠标单击下一个标注时，已经弹出的模态框是无法自动关闭；InfoWindow单击事件则是会即时展示现在单击的弹出模态框。 3.InfoBox的样式表要理解，必须理解的组成部分； 4.实现原理，就是CSS优先级和权重问题以及!important优先级； /*地图标题 infoW..
html页面点击弹出信息窗,点标记实例1：动态获取数据，点击标记点--弹出自定义信息窗, 弹出框交互操作...
weixin_34901243的博客
06-04 539
1、构建自定义信息窗体//构建自定义信息窗体function createInfoWindow(item) {// 外层容器var info = document.createElement("div");info.className = "info_wrapper";// 头部var headWrapper = document.createElement("div");headWrapper....
vue 腾讯地图信息窗口内容事件怎么监听
06-07
要监听腾讯地图信息窗口的内容事件，可以使用 TencentMap API 中的 `setInfoWindowContentCallback` 方法。该方法用于设置信息窗口的内容，并且可以在信息窗口内容改变时触发回调函数。 以下是示例代码： ```javascript // 创建地图 var map = new qq.maps.Map(document.getElementById('map'), { center: new qq.maps.LatLng(39.916527,116.397128), zoom: 13 }); // 创建信息窗口 var infoWin = new qq.maps.InfoWindow({ map: map }); // 设置信息窗口的内容，并监听内容变化事件 infoWin.setContent('这是一个信息窗口'); infoWin.setInfoWindowContentCallback(function() { console.log('信息窗口内容已经改变'); }); ``` 当信息窗口的内容发生变化时，就会触发 `setInfoWindowContentCallback` 方法中设置的回调函数。你可以在回调函数中执行自己的逻辑，比如更新页面上的数据等。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值