mapbox Marker添加自定义html

鳄鱼吃了我的房子

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

阅读量610

点赞数

CC 4.0 BY-SA版权

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

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

本文链接：https://blog.youkuaiyun.com/JasonAlonk/article/details/134782992

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

13 篇文章

订阅专栏

文章讲述了如何在JavaScript中创建MapboxGlMarker，通过`createElement`和`getElementsByClassName`找到元素，然后使用`insertAdjacentHTML`动态插入自定义内容的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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