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 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>
于 2013-04-23T22:59:39.100 に答える
1

同様のタスクを達成しようとしました-画鋲の上にカーソルを置いたときにカーソルをポインターに変更します。イベントハンドラーを使用していくつかのソリューションを試しました-マップと各ピンの「マウスアウト」、「マウスオーバー」イベントのさまざまな組み合わせ。これらのアプローチにはいくつかの問題がありました。イベントハンドラーが期待どおりに呼び出されず、プッシュピンにカーソルを合わせた後、カーソルがポインターに固執することがあり、カーソルをドラッグアンドドロップに戻すと、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 に答える