时间戳

首页 > 解决方案 > here-api 地图上以位置为中心的 svg 图标

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

问题描述

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

位置标记示例图片

我创建了一个可以旋转的 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)"/> &lt;/svg>';
var iconSVG = new H.map.Icon(svgArrow);
addMarkerToGroup(iconGroup, {lat:Latitude, lng:Longitude},
            '', {icon:iconSVG});

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

感谢分配

标签： javascripthere-api

解决方案

CSS 样式在这种情况下不起作用，因为标记在画布中呈现，因此它本身不在 DOM 树中。

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

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

推荐阅读