如何为Here Map添加图例？除react-leaflet组件外是否有其他方案？

以下是除react-leaflet组件之外的实用方案：

• 直接使用HERE Maps JS API原生UI组件
  借助HERE地图自带的UI控制接口，创建自定义图例控件并挂载到地图上，适配性更强。示例代码：

  // 创建图例容器
  const legendDiv = document.createElement('div');
  legendDiv.className = 'custom-legend';
  legendDiv.innerHTML = `
    <h4>图例</h4>
    <div><span style="background: #FF0000"></span> 红色标记</div>
    <div><span style="background: #00FF00"></span> 绿色区域</div>
  `;
  // 添加到地图UI指定位置
  const ui = map.getUi();
  ui.addControl('custom-legend', legendDiv, {
    position: 'bottom-right'
  });
  

  样式可通过自定义CSS调整，完全贴合HERE地图的交互逻辑。

• CSS绝对定位手动实现
  在React组件的地图容器上方直接添加固定定位的图例元素，通过z-index确保它显示在地图之上，灵活性拉满。示例：

  <div className="map-wrapper">
    {/* 你的HERE Map组件 */}
    <HereMapComponent />
    {/* 自定义图例 */}
    <div className="map-legend">
      <h4>图例</h4>
      <ul>
        <li><span className="legend-dot red"></span> 红色标记</li>
        <li><span className="legend-dot green"></span> 绿色区域</li>
      </ul>
    </div>
  </div>
  

  配套CSS：

  .map-wrapper {
    position: relative;
    width: 100%;
    height: 600px;
  }
  .map-legend {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: #fff;
    padding: 12px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 1000;
  }
  .legend-dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border-radius: 50%;
  }
  .red { background-color: #FF0000; }
  .green { background-color: #00FF00; }
  

• 使用HERE Maps的DomOverlay覆盖层
  如果需要图例和地图坐标绑定（比如跟随地图移动），可以用H.map.DomOverlay创建DOM覆盖层：

  class LegendOverlay extends H.map.DomOverlay {
    createDOMElement() {
      const div = document.createElement('div');
      div.className = 'custom-legend';
      div.innerHTML = `
        <h4>图例</h4>
        <div><span style="background: #FF0000"></span> 红色标记</div>
      `;
      return div;
    }
    // 设置图例在地图上的位置（可选，也可固定位置）
    getPosition() {
      return { lat: 39.9, lng: 116.4 }; // 示例坐标：北京
    }
  }
  // 添加到地图实例
  map.addObject(new LegendOverlay());
  

内容的提问来源于stack exchange，提问作者Razvan Razvi