Домаркеры оказываются в неправильном положении

here-api

464 просмотра

1 ответ

20 Репутация автора

Я добавляю маркеры, используя v3 Здесь Javascript api на карте показан на сайте. Добавление объекта «Маркер» работает отлично, но при его изменении на 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>';

Автор: Timmy Источник Размещён: 18.07.2016 10:34

Ответы (1)


1 плюс

882 Репутация автора

Решение

То, что вы описываете, кажется распространенной проблемой, когда якорь вашего значка установлен неправильно. Ваша иконка смещена на несколько пикселей. Поэтому при увеличении кажется, что маркер перемещается ближе к реальной позиции.

В зависимости от того, как выглядит ваш значок, вы можете установить привязку при создании значка:

// 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, чтобы переместить центр круга в верхний левый угол. Это должно поместить ваш круг в центр.

Автор: echom Размещён: 18.07.2016 06:05
Вопросы из категории :
32x32