mapbox Marker添加自定义html

鳄鱼吃了我的房子

已于 2023-12-06 14:42:45 修改

阅读量318

点赞数

分类专栏：开发中遇到的问题文章标签： html 前端 javascript

于 2023-12-04 14:40:20 首次发布

本文链接：https://blog.csdn.net/jasonalonk/article/details/134782992

版权

开发中遇到的问题专栏收录该内容

13 篇文章 0 订阅

订阅专栏

思路就是先渲染出空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);
        });
      }