如何为Here Map的DomIcon|DomMarker设置anchor/offset？DomIcon是否有对应anchor选项？

嘿，我来帮你理清Here Maps里关于DomIcon和DomMarker的定位偏移问题，这确实是和H.Icon不一样的地方，容易搞混～

核心结论先给你： #

• H.DomIcon没有像H.Icon那样的anchor配置选项；
• H.DomMarker支持直接设置偏移（锚点），同时你也可以通过CSS来调整DomIcon的DOM元素位置实现偏移。

方法1：直接给H.DomMarker设置锚点 #

H.DomMarker本身提供了anchor初始化参数，以及setAnchor()方法来动态调整偏移，这是最直接的方式。

举个例子，假设你有一个30x30px的圆形DomIcon，想要让图标中心对准地图上的坐标点：

// 1. 创建自定义DomIcon
const customDomIcon = new H.map.DomIcon(`
  <div style="width: 30px; height: 30px; background: #ff4444; border-radius: 50%;"></div>
`);

// 2. 初始化DomMarker时设置anchor：x和y取图标宽高的一半，让中心定位
const domMarker = new H.map.DomMarker(
  { lat: 52.5160, lng: 13.3779 }, // 柏林坐标示例
  {
    icon: customDomIcon,
    anchor: new H.math.Point(15, 15) // 偏移量：从图标左上角向右15px，向下15px
  }
);

// 添加到地图
map.addObject(domMarker);

如果之后需要动态调整锚点，用setAnchor()方法即可：

// 比如把锚点改成图标底部中心
domMarker.setAnchor(new H.math.Point(15, 30));

方法2：用CSS调整DomIcon的DOM元素位置 #

因为DomIcon本质是自定义DOM元素，你可以直接通过CSS的transform: translate()来偏移元素，这种方式适合需要和DOM样式联动的场景。

还是上面的圆形图标例子，用CSS让元素中心对齐默认定位点（左上角）：

const customDomIcon = new H.map.DomIcon(`
  <div style="
    width: 30px; 
    height: 30px; 
    background: #ff4444; 
    border-radius: 50%;
    transform: translate(-15px, -15px); /* 向左向上偏移自身一半，让中心对准定位点 */
  "></div>
`);

// 此时DomMarker不需要额外设置anchor，默认定位就会让图标中心对准坐标点
const domMarker = new H.map.DomMarker(
  { lat: 52.5160, lng: 13.3779 },
  { icon: customDomIcon }
);

map.addObject(domMarker);

为什么H.DomIcon没有anchor选项？ #

H.Icon的anchor是专门针对静态图片设计的，用来定义图片上哪个点对准地图坐标；而H.DomIcon是基于动态DOM元素的，本身就可以通过CSS自由控制位置，再加上DomMarker的anchor机制，已经足够灵活，所以不需要单独给DomIcon加anchor配置。

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