如何设置H.map.Marker对象显示指针光标？DomMarker可实现但Marker不行

没错，H.map.Marker确实没法直接通过API设置鼠标指针样式，但我们可以通过自定义SVG标记并嵌入光标样式的方法来实现这个效果——核心就是把cursor:pointer直接写在SVG的根元素样式里。

具体操作步骤如下：

• 先准备包含光标样式的SVG代码，确保根<svg>标签里加上style="cursor:pointer"
• 将这个SVG转换成H.map.Icon对象，再传给H.map.Marker的构造参数

下面是完整的可运行代码示例：

// 定义带有指针光标样式的自定义SVG标记
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 26 16.3 26 12.8 C 26 9.4 24.6 7.8 22.2 3.8 C 19.7 1.3 16.5 0 13 0 Z" fill="#fff"/>' +
  '<path d="M 13 2 C 15.8 2 18.1 3.1 19.7 4.7 C 21.3 7.2 22 9.3 22 11.8 C 22 14.3 21.3 16.4 19.7 18.9 L 13 26.2 L 6.3 18.9 C 4.7 16.4 4 14.3 4 11.8 C 4 9.3 4.7 7.2 6.3 4.7 C 7.9 3.1 10.2 2 13 2 Z" fill="#1976D2"/>' +
  '<text x="13" y="15" font-size="12px" font-weight="bold" text-anchor="middle" fill="#fff">POI</text>' +
'</svg>';

// 创建自定义图标对象
var customIcon = new H.map.Icon(svgMarkup);

// 创建Marker并应用自定义图标
var marker = new H.map.Marker(
  {lat: 52.5309, lng: 13.3847}, // 标记的坐标位置
  {icon: customIcon} // 传入带光标样式的图标
);

// 将Marker添加到地图实例中
map.addObject(marker);

额外说明： #

• H.map.DomMarker之所以能直接设置光标，是因为它基于DOM元素，你可以直接操作对应的DOM节点添加cursor:pointer样式；而H.map.Marker是基于Canvas/SVG渲染的，所以必须把样式嵌入到SVG内容中才能生效。
• 如果你已经有现成的Marker实例，只需要替换它的icon属性为这个带光标样式的SVG图标即可，其他业务逻辑不需要改动。

内容的提问来源于stack exchange，提问作者khchew