Google maps api-3:改变多边形的默认光标

Google maps api-3: Change polygon's default cursor

本文关键字：默认 光标 多边形 改变 maps api-3 Google      更新时间：2023-09-26

我可以改变地图的draggableCursor例如，但我即使我改变它的多边形的光标仍然是指针，因为地图是在多边形后面。我想将多边形的光标设置为"移动"，以便清楚地显示多边形是可拖动的。

改变多边形光标的正确方法是什么?是否有一个属性或方法来完成它?(我读了谷歌的文档，但我没有找到任何东西)

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

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

干杯!

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

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

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

map.getDiv()可用于实现此功能。

const polygon = new window.google.maps.Polygon({ map: map, clickable: true });
window.google.maps.event.addListener(polygon, 'mousemove', e => {
    map.getDiv().firstChild.firstChild.childNodes[1].style.cursor = 'copy';
});

对于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';

相关文章：