如何在HERE Maps中实现带文本的自定义标记及点击弹出信息功能

实现代码 #

这里直接给出和你原有Leaflet逻辑完全对应的HERE Maps实现：

// 初始化地图的基础逻辑请确保已经提前实现，此处假设地图实例变量为map

// 1. 定义弹窗内容
const texto1 = "Código: <br> Matricula: <br> País: <br> Direccion: <br> Velocidad:"

// 2. 定义自定义DOM标记，匹配原divIcon效果
const customIcon = new H.map.DomIcon(`
  <div class="enmarcha" style="width: 92px; height: 35px;">
    <p style="text-align: center; margin: 0; line-height: 35px;">Test</p>
  </div>
`, {
  // 标记锚点，保证标记底部中心对准经纬度坐标
  anchor: { x: 46, y: 17.5 }
})

// 3. 创建标记实例
const a1 = new H.map.DomMarker(
  { lat: 39.2014149305556, lng: -2.1445277235243 },
  { icon: customIcon }
)

// 4. 绑定点击弹出信息框逻辑
a1.addEventListener('tap', function () {
  // 清空其他已打开的弹窗（可选）
  map.getUI().getBubbles().forEach(bubble => map.getUI().removeBubble(bubble))
  // 创建顶部弹出的信息气泡
  const infoBubble = new H.ui.InfoBubble(a1.getGeometry(), {
    content: texto1
  })
  // 添加到地图UI层显示
  map.getUI().addBubble(infoBubble)
})

// 5. 标记聚合逻辑（对应原markerClusters功能）
// 如需使用聚合，需提前引入HERE聚类扩展组件，再执行以下代码
// const clusterProvider = new H.clustering.Provider([a1], {
//   clusteringOptions: { eps: 32, minWeight: 2 }
// })
// map.addLayer(new H.map.layer.ObjectLayer(clusterProvider))

// 如不需要聚合，直接把标记添加到地图即可
map.addObject(a1)

补充说明 #

• 自定义标记的样式可以直接修改enmarcha类的CSS，和你原有Leaflet的样式完全复用即可
• 信息气泡的样式可以通过修改.H_ib系列默认类的CSS调整，完全匹配你需要的弹窗效果
• 移动端点击事件同样适配tap事件，无需额外兼容

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