如何在Here.com Maps for javascript API 3.1中突出显示标记？

Question

如何更改pointerenter上的SVG标记的颜色（或其他样式）？我在2.3中找到了一些示例，但我正在使用3.1。

Answer 1

我现在正在使用DOM标记来解决。这样更简单。

Answer 2

这是在Javascript版本API 3.1（同样适用于3.0）上将鼠标悬停在上方时突出显示H.map.Marker的简单示例：

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。