当前位置: 首页 > news >正文

mapbox Marker添加自定义html

思路就是先渲染出空div使用getElementsByClassName找到点,之后使用insertAdjacentHTML(‘beforeend’, div) 加自定义内容。

  const el = document.createElement('div');// 添加一个标记el.className = 'j_icon';const itemIcon = new MapboxGl.Marker({element: el,}).setLngLat(marker.geometry.coordinates).addTo(this.map);this.renderHTML(document.getElementsByClassName('J_ICON_BOX'));renderHTML(domList) {domList.forEach(item => {// 自定义点内容const div = `<div style="font-family: PingFangSC-Medium;font-size: 18px;text-align: center;font-weight: 500;position: absolute;top: 7px;">xxxxx</div>`;item.insertAdjacentHTML('beforeend', div);});}

在这里插入图片描述

http://www.lryc.cn/news/255283.html

相关文章:

  • Linux UUCP命令教程:如何在Linux系统中进行文件复制(附实例详解和注意事项)
  • 【android开发-21】android中调用系统摄像头camera拍照和相册的用法详解
  • 最新版本——Hadoop3.3.6单机版完全部署指南
  • 理解自我效能感:你的内在动力来源
  • Java第二十一章
  • Redis交互速度慢,CPU占用100%,集群方案,报错等问题
  • wpf 系统在显示器分辨率和缩放设置为非1920*1080和100%时,SelectionChanged事件响应问题分析?
  • 刷题记录--算法--简单
  • 条码生成器与Zint使用
  • C#winform上下班打卡系统Demo
  • P1 Qt的认识及环境配置
  • 单元测试Nunit的几种断言
  • 前端中的响应式布局与各个端适配
  • 2023年5个自动化EDA库推荐
  • 7-1 查找书籍
  • 【无线网络技术】——无线广域网(学习笔记)
  • 【java+vue+微信小程序项目】从零开始搭建——健身房管理平台(2)后端跨域、登录模块、springboot分层架构、IDEA修改快捷键、vue代码风格
  • NGINX相关配置
  • 如何将idea中导入的文件夹中的项目识别为maven项目
  • CleanMyMac4.16中文最新版本下载
  • 谷歌正式发布最强 AI 模型 Gemini
  • 无人机语音中继电台 U-ATC118
  • 两种测量方式的自适应卡尔曼滤波数据融合
  • .Net6支持的操作系统版本(.net8已来,你还在用.netframework4.5吗)
  • CopyOnWriteArraySet怎么用
  • uniapp得app云打包问题
  • Linux bin包生成
  • Java多人聊天
  • 自动驾驶:传感器初始标定
  • 如何将 MySQL 数据库转换为 SQL Server