Question

最近在一个项目中，我在点击地图标记时显示Info Window，其中内容已加载XHR请求。从点击事件到AJAX回调触发信息窗口打开的时间有明显的延迟，我想将鼠标光标更改为“等待”图标，以便用户知道他们的点击触发了某些内容。

我首先尝试在body, html上设置光标样式，但发现地图使用的样式取代了它。

那么，无论鼠标指针位于标记，地图或页面上的其他位置，如何设置等待光标？

这是我第一次发布问题，我已准备好答案了。我发现一些帖子谈论设置地图光标或标记光标没有简单地解释如何完成我在这里要求的内容。希望这可以节省一点时间。

Answer 1

我最终得到了以下代码来完成此任务：

/**
* Event handler for marker click event
*/
function markerClickHandler(marker, event) {

    $('html, body').css("cursor", "wait");
    auctionMap.setOptions({draggableCursor: 'wait'});
    marker.setCursor('wait');

    $.ajax({
        type: 'GET',
        url: '/get-marker-info/' + marker.some_id,
        dataType: 'html',
    }).done(function(response) {
        infoWindow.setContent(response);
        infoWindow.open(map, marker);
    }).fail(function() {
        alert('An unknown error occurred.');
    }).always(function() {
        $('html, body').css("cursor", "auto");
        auctionMap.setOptions({draggableCursor: null});
        marker.setCursor(null);
    });
}

当鼠标在页面的任何位置，地图内外或标记时，会显示等待光标。

默认情况下，draggableCursor使用的是张开手（http://maps.gstatic.com/mapfiles/openhand_8_8.cur）的图片，而不是标准CSS cursor property value。这就是为什么我们在调用完成后恢复光标时使用null，而不是使用光标auto。

虽然在与鼠标移动的相互作用中引发过渡，但它的效果还不错。好奇，如果有人能在这方面改进代码。

查看示例：http://jsfiddle.net/0ere5tju/

如何在加载Google Maps API v3信息窗口时更改鼠标光标/指针

1 个答案: