Google maps api-3：更改多边形的默认光标答案

【问题标题】：Google maps api-3: Change polygon's default cursorGoogle maps api-3：更改多边形的默认光标
【发布时间】：2013-05-14 21:01:25
【问题描述】：

例如，我可以更改地图的 draggableCursor，但即使我更改它，多边形的光标仍然是指针，因为地图位于多边形后面。我想将多边形的光标设置为“移动”，以明确多边形是可拖动的。

更改多边形光标的正确方法是什么？有没有属性或方法可以做到这一点？（我已经阅读了谷歌的文档，但我没有找到任何东西）

ps。我有理由在折线上使用多边形，所以折线不是一种选择。

【问题讨论】：

很遗憾没有更改光标的选项。指针似乎表明多边形是可点击的，但是当您将可点击选项设置为 false（在这种情况下会出现拖动光标）时，多边形不再是可拖动的。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

其实这似乎是可能的。这是想法。
css：

.moving,
.moving * {cursor: move !important;}

js:

google.maps.event.addListener(myPolygon, 'mousemove',
    function(e) {
        if (!isNaN(e.edge) || !isNaN(e.vertex))
            mapCanvas.className = '';
        else
            mapCanvas.className = 'moving';        
    }
);

google.maps.event.addListener(myPolygon, 'mouseout',
    function() {
        mapCanvas.className = '';
    }
);

干杯！

【讨论】：

对我有用，但必须添加：mapCanvas = document.getElementById("container");
这对我有用：document.getElementById("map").className = 'moving';

【解决方案2】：

您可以在 div #map 上设置 CSS 光标 !important，但它始终会覆盖您的自定义光标。

#map div
{
    cursor: url("your.url.to.cursor.png"), default !important;
}

【讨论】：

【解决方案3】：

以the answer given by Boris D. Teoharov 为基础，更简洁（使用 jQuery），使用与地图其余部分完全相同的光标（带有可通过的后备），并且仍然允许光标切换标记：

CSS：

.moving div { cursor: url('https://maps.gstatic.com/mapfiles/openhand_8_8.cur'), grab; }

JS：

map.data.addListener('mouseover', function() {
    $('#map-container-id').addClass('moving');
});

map.data.addListener('mouseout', function() {
    $('#map-container-id').removeClass('moving');
});

【讨论】：

【解决方案4】：

在多边形和地图的鼠标事件上执行以下操作：
光标在地图上：

document.getElementById("map").children[0].children[0].style.cursor = 'url(res/end.png), auto';

光标在多边形上：

document.getElementById("map").style.cursor = 'url(res/end.png), auto';

【讨论】：

你应该解释你的代码并正确格式化它。