2

我正在使用 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 上的非指针或其他东西，但我不确定这是否是最好的方法。

4

3 回答 3

6

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

但是，如果您想更新您的代码，这里有一个真正有效的完整示例，因为当鼠标悬停在基本地图上时，“手”是 Bing 地图中的默认元素，请参见代码：

    <!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>
于 2013-04-23T22:59:39.100 回答
1

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

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

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

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

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

升级版：

如果您不想弄乱 bing 的基本样式，您可以将自定义 CSS 类应用于图钉，您希望有指针光标，如下所示：

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

在 Javascript 中：

new Microsoft.Maps.Pushpin(location, {typeName: 'my-pin'});
于 2014-04-01T11:04:49.863 回答
0

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

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

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

于 2013-04-23T16:47:13.993 回答