javascript - HERE maps marker with cursor pointer - Stack Overflow

admin管理员组

文章数量:1388885

How can i set the H.map.Marker object to show cursor as pointer? This can be done with H.map.DomMarker but not H.map.Marker

var svgMarkup = '<svg style="cursor:pointer" xmlns="" 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 });

If you hover to the marker, the cursor will still be the default. But if I use H.map.DomIcon with H.map.DomMarker, the cursor will bee pointer

How can i set the H.map.Marker object to show cursor as pointer? This can be done with H.map.DomMarker but not H.map.Marker

var svgMarkup = '<svg style="cursor:pointer" xmlns="http://www.w3/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 });

If you hover to the marker, the cursor will still be the default. But if I use H.map.DomIcon with H.map.DomMarker, the cursor will bee pointer

• javascript
• here-api

Share Improve this question Follow edited Mar 27, 2018 at 15:21 Michel 28.4k66 gold badges6767 silver badges7272 bronze badges asked Mar 21, 2018 at 6:50 khchewkhchew 4155 bronze badges 1

• add some code so other can understand easily – Night Programmer Commented Mar 21, 2018 at 6:51

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Why does it happen ?

In the case of an H.map.DomMarker, the marker is part of the DOM tree and can be styled like any other SVG element in the DOM.

However, in the case of an H.map.Marker, the SVG markup you defined is drawn in the canvas. This is why the style="cursor: pointer" rule has no effect.

Can we style a marker in the canvas ?

Yes we can.

You could add an event listener to each marker, to change the canvas cursor on 'pointerenter / pointerleave', however, to avoid adding too many listeners, we can add just one on the map object, and check the instance of the target element:

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);

本文标签： javascriptHERE maps marker with cursor pointerStack Overflow