Как выделить маркер в Here.com Maps для javascript API 3.1? - PullRequest
Новая
       2

Как выделить маркер в Here.com Maps для javascript API 3.1?

0 голосов
/ 20 марта 2020

Как изменить цвет (или другой стиль) маркера SVG на pointerenter? Я нашел несколько примеров в 2.3, но я использую 3.1.

Ответы [ 2 ]

1 голос
/ 23 марта 2020

Вот простой пример выделения H.map.Marker при наведении курсора мыши в Javascript версии API 3.1 (работает и для 3.0): 

var svg = `<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" fill="FILL_COLOR" opacity=".8"/>
    <circle cx="50" cy="50" r="4" fill="black"/>
    </svg>`,
    size = {w: 30, h: 30},
    // we need to specify the correct hit area as the default one for custom icon is rectangular shape
    hitArea = new H.map.HitArea(H.map.HitArea.ShapeType.CIRCLE, [size.w/2, size.h/2, size.w/2]),
    icon = new H.map.Icon(
      svg.replace('FILL_COLOR', 'rgba(30, 200, 200, 0.7)'),
      {
        size,
        anchor: {x: size.w/2, y: size.h/2},
        hitArea
      }
    ),
    iconHover = new H.map.Icon(
      svg.replace('FILL_COLOR', 'rgb(30, 200, 200'),
      {
        size,
        anchor: {x: size.w/2, y: size.h/2},
        hitArea
      }
    ),
    marker = new H.map.Marker(map.getCenter(), {
      icon: icon,
      volatility: true // <- volatile objects re-render faster
    });

marker.addEventListener('pointerenter', function(e) {
  marker.setIcon(iconHover);
});

marker.addEventListener('pointerleave', function(e) {
  marker.setIcon(icon);
});

map.addObject(marker);

См. Это в действии: jsfiddle .

0 голосов
/ 21 марта 2020

Я сейчас использую маркеры DOM в качестве обходного пути. Так проще.

...