Question

我正在使用Bing Maps AJAX V7地图API进行开发，我正在尝试将光标设置为不同的东西，同时将鼠标悬停在不同的地图元素上。例如，当鼠标滚过图钉时，这就是我正在做的事情：

Microsoft.Maps.Events.addHandler(g_map, "mousemove", function (event) {
    if (event.targetType === "pushpin") {
        g_map.getRootElement().style.cursor = "pointer";
    }
});

我无法弄清楚的是如何在用户将鼠标移出图钉后恢复正常功能。我想也许可以将光标设置在mouseenter上的指针上，然后返回到mouseleave上的非指针或其他东西，但我不确定这是不是最好的方法。

Answer 1

您正在基本地图上使用该事件，因此我建议在图钉本身上绑定事件，以避免不必要地调用此特定事件。

但是如果你想更新你的代码，这里有一个真正有用的完整例子，因为'hand'是Bing Maps中的默认元素，而鼠标位于基本地图上，请参阅代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Bing Maps Cursor</title>
    <script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    <script type="text/javascript">
        var map = null;

        function getMap() {

            // Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById('map'), {
                credentials: "YOURKEY",
                center: new Microsoft.Maps.Location(47.5, 2.75),
                zoom: 4,
                mapTypeId: Microsoft.Maps.MapTypeId.road
            });

            var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.5, 2.75));
            map.entities.push(pin);    

            Microsoft.Maps.Events.addHandler(map, 'mousemove', function(event) {
                if(event.targetType === 'pushpin') {
                    map.getRootElement().style.cursor = 'pointer';
                } else {
                    map.getRootElement().style.cursor = 'url("' + Microsoft.Maps.Globals.cursorPath + 'grab.cur"), move';
                }
            });
        }
    </script>
</head>
<body onload="getMap();">
    <div id="map" style="position: relative; width: 800px; height: 600px;">
    </div>
</body>
</html>

如果您想要基于图钉事件的推荐方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Bing Maps Cursor</title>
    <script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    <script type="text/javascript">
        var map = null;
        var cursorStyle = null;

        function getMap() {

            // Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById('map'), {
                credentials: "YOURKEY",
                center: new Microsoft.Maps.Location(47.5, 2.75),
                zoom: 4,
                mapTypeId: Microsoft.Maps.MapTypeId.road
            });

            var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.5, 2.75));
            map.entities.push(pin);    

            Microsoft.Maps.Events.addHandler(pin, 'mouseover', changeCursor);
            Microsoft.Maps.Events.addHandler(pin, 'mouseout', revertCursor);    
        }

        function changeCursor(e) { 
            map.getRootElement().style.cursor = 'pointer';
        }
        function revertCursor(e) { 
            map.getRootElement().style.cursor = 'url("' + Microsoft.Maps.Globals.cursorPath + 'grab.cur"), move';
        }
    </script>
</head>
<body onload="getMap();">
    <div id="map" style="position: relative; width: 800px; height: 600px;">
    </div>
</body>
</html>

Answer 2

我试图完成类似的任务 - 将鼠标悬停在图钉上时将光标更改为指针。我已经尝试了几种带有事件处理程序的解决方案 - 鼠标输出的不同组合，鼠标悬停＆＃39;地图和每个引脚的事件。我对这些方法有几个问题：有时事件处理程序没有按预期调用，我的光标在将鼠标悬停在图钉上后粘在指针上，将cusrsor恢复为拖放需要我引用bing＆＃39;自定义光标（https://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20140318165546.99/cursors/grab.cur），这是不可靠的，因为此链接可以随时更改。

因此，在我看来，改变图钉光标的解决方案更好：

<style>
    .MapPushpinBase { cursor: pointer !important; }
</style>

在我的情况下，它会在需要时恢复到合适的光标，并且不要求我引用bing的资源。

但是，我不确定是否可以将其应用于其他实体类型，例如折线。此外，此解决方案将为页面上的每个图钉应用光标样式，因此您可能希望稍微修改图钉样式。

UPD：

如果你不想搞乱bing的基本风格，你可以将自定义CSS类应用于图钉，你想要有指针光标，如下所示：

.my-pin {
    cursor: pointer !important;
}

在Javascript中：

new Microsoft.Maps.Pushpin(location, {typeName: 'my-pin'});

Answer 3

我需要做类似的事情（根据鼠标当前悬停的内容更改鼠标光标），我使用mouseout事件将光标设置回default：

Microsoft.Maps.Events.addHandler(g_map, "mouseout", function (event) {
    if (event.targetType === "pushpin") {
        g_map.getRootElement().style.cursor = "default";
    }
});

请记住，当您通过鼠标与地图进行交互时，Bing贴图ajax控件会自动更改鼠标光标，因此如果您也更改它，有时您会使用鼠标指针进入奇怪的视觉状态你自己。没什么大不了的，你只需要知道它。

在Bing Maps中将光标设置为空心手

3 个答案: