mapbox Marker添加自定义html

使用JavaScript动态渲染MapboxGlMarker元素,

原创已于 2023-12-06 14:42:45 修改 · 652 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

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

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

13 篇文章

订阅专栏

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

部署运行你感兴趣的模型镜像

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