Google地图api-3:更改多边形的默认光标

Question

例如，我可以更改地图的draggableCursor，但即使我更改了它，多边形的光标仍然是指针，因为地图位于多边形后面。我想将多边形的光标设置为'move‘，以便清楚地表明多边形是可拖动的。

改变多边形光标的正确方法是什么？有没有这样做的属性或方法？(我已经阅读了Google的文档，但我没有找到任何东西)

ps。我有理由使用Polygon over Polyline，所以Polyline不是一个选项。

Answer 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 = '';
    }
);

干杯!

Answer 2

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

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

Answer 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');
});