Здесь-api по центру svg значок на карте - PullRequest
Новая
       7

Здесь-api по центру svg значок на карте

0 голосов
/ 15 октября 2018

есть вопрос для размещения значков на здесь Map V3 с каркасом Javascript в Браузере (Chrome, Firefox).

пример изображения маркера положения

Iсоздайте стрелку svg, которую можно вращать.(зеленая точка и прямоугольник просто для лучшего распознавания проблемы) Но я не могу центрировать новый созданный значок на GeoCoordinate.Зеленая точка значка и стрелка расположены на одной и той же GeoCoordinate.

Я хочу, чтобы мой Icon точно центрировался на этой 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, который должен работать, как сказал другой пользователь, но ничто не помогает получить правильную позицию.У кого-нибудь была идея, как решить эту проблему.

Спасибо, спасибо

1 Ответ

0 голосов
/ 17 октября 2018

Стили CSS в этом случае не действуют, потому что маркер отображается на холсте, поэтому он не находится в дереве DOM.

Однако вы можете достичь того, что вам нужно, указав опции для H.map.Icon конструкция, более конкретно, используя свойство anchor, которое принимает смещения по x и y.Примерно так: 

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