here-api 在地图上以位置为中心的 svg 图标

Question

有关于使用浏览器（Chrome、Firefox）中的 Javascript 框架在 here Map V3 上定位图标的问题。

position marker example picture

我创建了一个可以旋转的 svg 箭头。（绿点和矩形只是为了更好地识别问题）但我无法将新创建的图标置于地理坐标的中心。绿色图标点和箭头位于同一个地理坐标。

我希望我的图标准确地以该地理坐标为中心，因为如果您使用不同的缩放级别，箭头似乎会远离地理坐标。

我使用的代码片段之一

var svgArrow = '<svg width="30" height="30"  xmlns="http://www.w3.org/2000/svg">' +
                '<polyline points="15,2 25,27 15,15 5,27" stroke="#FE6940" fill="#FE6940" transform="rotate('+ PosDirection + ',15,15)"/> </svg>';
var iconSVG = new H.map.Icon(svgArrow);
addMarkerToGroup(iconGroup, {lat:Latitude, lng:Longitude},
            '', {icon:iconSVG});

我尝试了一些带有额外 css 的东西，其他用户告诉它们应该可以工作，但没有任何帮助获得正确的位置。有没有人知道如何解决这个问题。

感谢分配

Answer 1

CSS 样式在这种情况下没有效果，因为标记在 canvas 中呈现，因此它本身不在 DOM 树中。

然而，您可以通过为 H.map.Icon 构造指定选项来实现您需要的，更具体地说，使用带有 x 和 y 偏移量的属性 anchor。类似于以下内容：

var iconSVG = new H.map.Icon(svgArrow, {
  anchor: {
    x: svgWidth / 2,
    y: svgHeight / 2
  }
});

here-api 在地图上以位置为中心的 svg 图标

here-api position centered svg icon on the Map

javascript

here-api