谷歌地图隐藏手图标

Google map hide hand icon

本文关键字：图标 隐藏 谷歌地图      更新时间：2023-09-26

我正在使用谷歌地图 api V3，我目前正在将自定义标记显示为 6x6px 的点，当鼠标悬停在它们上时，我正在显示信息窗口。

我已经在地图上和标记上将光标

设置为默认值，现在当我将鼠标悬停在标记上，然后将鼠标移动到信息窗口几分之一秒时，它会显示手形光标，当我在地图上有很多标记时，它看起来很丑陋，我需要避免这种情况， 请让我知道我如何避免这种情况。

这是我的jsfiddle在这里悬停在蓝点上，蓝点是从下到上是标记，你会看到很少的闪烁，我根本不想显示手图标......我只想要默认光标

这就是我创建信息窗口的方式

var infowindow = new google.maps.InfoWindow({
    content: "infowindow",
    cursor: 'default',
});

这个CSS解决了我的问题...

#map div {
 cursor:default !important;  
}
我相信

这可能是谷歌地图API的"错误"/"特征"。 正在发生的事情是，当向上垂直移动光标时，它会离开标记并移动到信息框的透明边界框上。 但是，您的市场鼠标输出处理程序随后会从地图中删除信息框。

因此，Google Maps API 必须决定当光标位于已删除的元素上时该怎么做。 它应该选择您在地图选项中定义为默认值的光标;但事实并非如此。 我同时使用了FireFox和Chrome的Element Inspectors，并反复看到，当InfoBox被删除时，Google Maps API明确地将活动光标设置为"手"，而不是将其保留为地图的主要子"div"中的"默认"。

我在 JSFiddle 中的初始化代码中添加了一个 document.body.style.cursor 定义，只是为了确保浏览器本身不会对光标感到困惑：

$(document).ready(function () {
    mapObjects.domReady = true;
    document.body.style.cursor = "default";
});

即使添加了它，使用Chrome中的元素检查器说，您也会看到"div"正下方的"div"class="gm-style"......"删除信息框时，将其光标样式显式更改为手形的"URL"。 将光标再移动一个像素，该"div"的光标样式就会被Google Maps API重置为"默认"。

所以问题不在于光标样式的浏览器继承。 Google 地图 API 本身会覆盖该子"div"及其所有子"div"的光标样式，其中地图图像是其中的一部分（当信息框被删除时，光标将停留在上面）。

当然，您应该向Google提交错误报告。 也许他们会在Google Maps API的V4中解决这个问题。

一种可能的解决方法：

您可以尝试重新定位信息框，使它们距离标记三个、五个或更多像素，并且偏离中心，例如标记的右侧或左侧。 然后，当光标移出标记（并触发鼠标退出和信息框删除）时，它不在信息框的隐藏部分顶部，而是在地图图像磁贴上。 因此，它的行为就像现在从标记向右、向左或向下移动一样，并且不会被 InfoBox 删除覆盖。 但是，如果最终用户快速移动光标，或者朝现在偏离中心的信息框方向移动光标，您仍然会出现手形光标。

另一个不太推荐的可能解决方法：

a. Do the first recommendation (the gap between Marker and InfoBox).
b. Get a handle to that particular 'div' by stepping through the immediate children of the "gm-style" div.
c. In the MouseOut handler, use a SetTimeout with a very short millisecond interval to re-override that 'div's' cursor style back to "default".

即使在偏离中心的信息框上快速移动时，这也会摆脱手形光标。 您仍然会得到轻微的闪烁，但如果最终用户停止移动光标，它不会以这种方式保持手形光标。 但这已经深入到谷歌的地图"div"结构中，这种解决方法在长期内并不可靠。

您的解决方案是正确的，问题在于标记图标是图像。尝试使用google.maps.symbols更改它

我已经为您的小提琴上的标记创建了一个自定义 SVG 路径，它有效，但信息窗口仍在闪烁。

这是图标符号对象 

icon: {
        path: 'M0,0 10,0 10,10 0,10 Z',
        scale: 1,
        fillColor: '#076EB5',
        strokeColor: '#076EB5',
        fillOpacity: 1,
    }

关于这里符号的漂亮文档

相关文章：