Question

对于使用浏览器（Chrome，Firefox）中的Javascript框架在此处的Map V3中放置图标存在疑问。

我创建了一个可以旋转的svg箭头。（绿点和矩形只是为了更好地识别问题）但是我不能将新创建的图标居中在GeoCoordinate上。绿色图标点和箭头位于同一GeoCoordinate。

我希望我的图标精确位于此GeoCoordinate的中心，因为如果您使用不同的缩放级别，则箭头似乎会从GeoCoordinate移开。

我使用的其中一个代码段

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样式无效，因为标记是在画布中呈现的，因此本身不在DOM树中。

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

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

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

1 个答案: