为什么 DOMMarker 和 Marker 在 HERE 地图 JS 上的位置看起来不同？

Question

我们正在使用 HERE JS 3.0 并尝试向我们的地图添加自定义标记。

我注意到我们的自定义 SVG 总是有点偏离中心并且与放置 "regular" 标记的位置不匹配（"regular" 标记指向正确的位置）甚至尽管提供的坐标相同：

（上面的 fiddle 使用的是 3.1，但同样的行为也发生在 3.0 中。）

  var icon = new H.map.DomIcon(svgMarkup);
  var domMarker = new H.map.DomMarker(coords, {icon: icon});
  map.addObject(domMarker);

  var regularMarker = new H.map.Marker(coords);
  map.addObject(regularMarker);

关于如何处理这个问题有什么建议吗？

Answer 1

您的自定义 SVG 和常规标记都位于相同的地理坐标。自定义 SVG 似乎不合适，因为它是一个正方形，并且它的左上角位于指定的地理坐标处，而常规标记放置在其尖端位于地理坐标处。请使用 CSS 边距，使 SVG 居中。

Answer 2

由于 DOM 标记相对于父容器是绝对定位的，您可以在 <svg> 元素上使用 left 和 right CSS 属性.像这样：

var svgMarkup = '<svg style="left: -12px; top: -12px;" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
                  //...
                '</svg>'

JS Fiddle Demo

为什么 DOMMarker 和 Marker 在 HERE 地图 JS 上的位置看起来不同？

Why do DOMMarker and Marker appear to be placed differently on HERE map JS?

here-api