Question

我正在使用v3在网站上显示的地图上添加标记这里的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设置不正确时，您所描述的内容似乎是一个常见问题。您的图标会被某些像素偏移。这就是为什么在放大时标记会更接近实际位置的原因。

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

＆＃13;

// 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

＆＃13;

修改您需要手动翻译图标以获得与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出现错误的位置

1 个答案: