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

【问题标题】：How to Change the Mouse Cursor / Pointer when Google Maps API v3 Info Window is Loading加载 Google Maps API v3 信息窗口时如何更改鼠标光标/指针
【发布时间】：2015-09-17 19:47:46
【问题描述】：

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

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

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

这是我第一次发布我已经准备好答案的问题。我发现一些关于设置地图光标或标记光标的帖子没有简明扼要地解释如何完成我在这里提出的要求。希望这可以节省一些时间。

【问题讨论】：

标签： google-maps google-maps-api-3

【解决方案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/

【讨论】：