这里使用自定义 'center' 映射自定义标记

Question

我正在向 Here V3 地图添加自定义标记，但默认情况下，它是附加到标记坐标的 top-left 像素，我正在尝试 pin-point。

有没有办法告诉 DomMarker 与所需位置相关的精确像素？

var outerElement = document.createElement('div'),
innerElement = document.createElement('div');

innerElement.innerHTML = '<img src="/Images/' + getMarkerImage(donation) + '" />';
outerElement.appendChild(innerElement);

var domIcon = new H.map.DomIcon(outerElement, {});
var domMarker = new H.map.DomMarker(
    { lat: donation.Lat, lng: donation.Long },
    { icon: domIconn}
);

map.addObject(domMarker);

Answer 1

我不确定它的最佳实践，但这似乎有效...

innerElement.innerHTML = '<img src="/Images/' + getMarkerImage(donation) + '" style="margin-left:-28px; margin-top:-34px;" />';

Answer 2

如果您使用的是来自 Here Maps 的最新 JavaScript SDK，您可以通过 anchor 属性（默认设置位置至 bottom-center).

假设您的自定义图标的大小为 markerWidth x markerHeight，并且您希望将其居中。然后，您需要在创建图标时创建发送 H.map.Icon.Options 属性的标记。请参阅以下示例：

const centeredMarker = new H.map.Marker(
      {
        lat: latitude,
        lng: longitude,
      },
      {
        icon: new H.map.Icon(imageElement, {
          anchor: new H.math.Point(markerWidth / 2, markerHeight / 2),
          crossOrigin: false,
        }),
      }
    );

这里使用自定义 'center' 映射自定义标记

Here maps custom marker with custom 'center'

javascript

here-api