6

I can change the map's draggableCursor for example but I even if I change it polygon's cursor is still pointer since the map is behind polygons. I would like to set the polygon's cursor to 'move' so as to be clear that polygon is draggable.

What is the proper way to change polygon's cursor? Is there a property or method to do it? (Ive read Google's documentation but I didnt find anything)

ps. I have reason to use Polygon over Polyline so Polyline is not an option.

4

4 回答 4

8

实际上,这似乎是可能的。这是想法。
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 = '';
    }
);

干杯!

于 2013-05-16T15:12:05.133 回答
1

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

#map div
{
    cursor: url("your.url.to.cursor.png"), default !important;
}
于 2016-11-25T19:43:05.033 回答
1

基于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');
});
于 2019-05-08T17:25:05.670 回答
-1

在 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';

于 2015-04-30T14:22:25.457 回答