Dommarkers 出现在不正确的位置

Question

我正在使用 v3 Here Javascript api 在网站上显示的地图上添加标记。添加一个 Marker 对象效果很好，但是当将其更改为 DomMarker 时，标记在地图上有很大的偏移量，并且在放大时似乎更接近它们的真实位置。我试图搜索类似的问题，但找不到回答。如何让 DomMarkers 正确显示在它们的真实位置？

我正在使用 Chrome 浏览器。

这是代码。

这个有效：

var icon = new H.map.Icon(svgMarkup);
var marker = new H.map.Marker({lat: startLat, lng: startLong}, {icon: icon});       
map.addObject(marker);

这不是：

if (obsIcon == null){
    obsIcon = new H.map.DomIcon(svgMarkup);
}
var marker = new H.map.DomMarker({lat: startLat, lng: startLong, ctx: 'GL'  }, {icon: obsIcon});        
map.addObject(marker);

编辑：这是 svgMarkup 的代码：

var svgMarkup = '<svg width="20" height="20" ' + 'xmlns="http://www.w3.org/2000/svg">' + '<circle cx="10" cy="10" r="5" stroke="#000" stroke-width="1" fill="'+ fColor+'" />'+ '</svg>';

Answer 1

您所描述的似乎是图标 anchor 设置不正确时的常见问题。您的图标偏移了一些像素。这就是为什么放大时标记看起来更接近实际位置的原因。

根据您的图标外观，您可能希望在构建图标时设置锚点：

// assuming your icon is 40x40 pixels (change values as necessary)
var icon = new H.map.Icon(svgMarkup, { anchor: {x: 20, y: 40} }); //bottom-center

icon.setAnchor({x: 0, y: 0}) //top-left
icon.setAnchor({x: 20, y: 20}) //center
icon.setAnchor({x: 40, y: 0}) //top-right

编辑您需要手动翻译图标才能获得与 DomIcons 上的锚点相同的效果。

'<div><svg width="20" height="20" ' +
   'xmlns="http://www.w3.org/2000/svg" ' +
   'style="transform:translate(-10px, -10px)">' +
'<circle cx="10" cy="10" r="5" stroke="#000" stroke-width="1" fill="#ff00ff" />'+
'</svg><div>'

请注意标记周围的 div，因为 DOM 标记会将它自己的转换放在最外层元素上。然后在 SVG 内部我添加一个 -10/-10 的变换以将圆的中心移动到左上角。那应该把你的圈子很好地放在中心。

Dommarkers 出现在不正确的位置

Dommarkers appear into incorrect position

here-api