Javascript 这里用光标指针映射标记

Javascript 这里用光标指针映射标记,javascript,here-api,Javascript,Here Api,如何将H.map.Marker对象设置为将光标显示为指针?这可以使用H.map.DomMarker完成,但不能使用H.map.Marker var svgMarkup = '<svg style="cursor:pointer" xmlns="http://www.w3.org/2000/svg" width="28px" height="36px">' + '<path d="M 19 31 C 19 32.7 16.3 34 13 34 C 9.7 34 7 32.7

如何将H.map.Marker对象设置为将光标显示为指针?这可以使用H.map.DomMarker完成,但不能使用H.map.Marker

var svgMarkup = '<svg style="cursor:pointer" xmlns="http://www.w3.org/2000/svg" width="28px" height="36px">' +
  '<path d="M 19 31 C 19 32.7 16.3 34 13 34 C 9.7 34 7 32.7 7 31 C 7 29.3 9.7 28 13 28 C 16.3 28 19 29.3 19 31 Z" ' +
  'fill="#000" fill-opacity=".2"/><path d="M 13 0 C 9.5 0 6.3 1.3 3.8 3.8 C 1.4 7.8 0 9.4 0 12.8 C 0 16.3 1.4 19.5 ' +
  '3.8 21.9 L 13 31 L 22.2 21.9 C 24.6 19.5 25.9 16.3 25.9 12.8 C 25.9 9.4 24.6 6.1 22.1 3.8 C 19.7 1.3 16.5 0 13 0 Z"' +
  ' fill="#fff"/><path d="M 13 2.2 C 6 2.2 2.3 7.2 2.1 12.8 C 2.1 16.1 3.1 18.4 5.2 20.5 L 13 28.2 L 20.8 20.5 C 22.9 ' +
  '18.4 23.8 16.2 23.8 12.8 C 23.6 7.07 20 2.2 13 2.2 Z" fill="${COLOR}"/><text x="13" y="19" font-size="8pt" ' +
  'font-weight="bold" text-anchor="middle" fill="#fff">${TEXT}</text></svg>';

var icon = new H.map.Icon(svgMarkup.replace('${COLOR}', colour != null ? colour : 'red').replace('${TEXT}', text != null ? text : 'P')),
  marker = new H.map.Marker(coords, { icon: icon });
var svgMarkup=''+
“${TEXT}”;
var icon=new H.map.icon(svgMarkup.replace('${COLOR}',COLOR!=null?COLOR:'red')。replace('${TEXT}',TEXT!=null?TEXT:'P'),
marker=newh.map.marker(坐标,{icon:icon});

如果将光标悬停在标记上,光标仍将是默认值。但是如果我将H.map.domcon与H.map.DomMarker一起使用,光标将变成指针

为什么会发生这种情况?

对于
H.map.DomMarker
,该标记是DOM树的一部分,可以像DOM中的任何其他SVG元素一样设置样式

但是,对于
H.map.Marker
,您定义的SVG标记将在画布中绘制。这就是为什么
style=“cursor:pointer”
规则无效的原因

我们可以在画布上设置标记样式吗?

是的,我们可以

您可以向每个标记添加一个事件侦听器,以更改“PointerNet/pointerleave”上的画布光标,但避免添加太多 侦听器,我们可以在map对象上只添加一个,并检查目标元素的实例:

map.addEventListener('pointermove', function (event) {
  if (event.target instanceof H.map.Marker) {
    map.getViewPort().element.style.cursor = 'pointer';
  } else {
    map.getViewPort().element.style.cursor = 'auto';
  }
}, false);

添加一些代码,以便其他人可以轻松理解