Question

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

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

PS。我有理由在Polyline上使用Polygon，因此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

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

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

Answer 3

在the answer given by Boris D. Teoharov的基础上，它更整洁（使用jQuery），使用与地图其余部分完全相同的光标（具有可传递的回退），并且仍然允许光标切换标记：< / p>

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

Answer 4

关于polybon和map的鼠标事件执行此操作：
光标在地图上：

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

光标在多边形上：

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

谷歌地图api-3：更改多边形的默认光标

4 个答案: