在Bing Maps中將光標設置爲張開的手

我正在使用Bing Maps AJAX V7地圖API進行開發，並且我試圖在將鼠標懸停在不同的地圖元素上時將光標設置爲不同的東西。例如，這是我在做什麼的時候了圖釘鼠標指針滑過：在Bing Maps中將光標設置爲張開的手

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

我無法弄清楚是如何在用戶將鼠標移出圖釘後恢復到正常功能。我想也許將鼠標指針設置爲mouseenter上的指針，並返回到mouseleave上的非指針，但我不確定這是否是最好的方法。

來源

2013-04-23 keybored

既然你正在處理在底圖上的情況下，你可以有別的情況，並恢復光標默認。 – 2013-04-23 22:35:20

我已經需要做的（這取決於鼠標當前懸停改變鼠標光標）類似的事情，我已經使用了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-23 16:47:13

默認光標不是在地圖控件上使用的光標（默認情況下爲手動）。除此之外，您不必在全局元素上使用鼠標移動，而是在其他元素類型上使用鼠標移動或在特定圖釘元素上使用鼠標移出。 – 2013-04-24 08:05:47

您正在底圖上使用事件，所以我建議將圖釘綁定事件本身，以避免不必要的調用此特定事件。

但是，如果你想更新你的代碼，在這裏是因爲「手」，真正的作品一個完整的例子是在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-23 22:59:39

完美答案謝謝 – 2015-10-13 12:00:18

https://ecn.dev.virtualearth.net/mapcontrol/v7.0/cursors/grab.cur不再存在 – 2015-10-13 19:24:58

修復了動態url：Microsoft.Maps.Globals.cursorPath +'搶。 CUR」 – 2015-10-14 19:20:10

我試圖完成類似的任務 - 將鼠標懸停在一個圖釘時改變光標指針。我已經嘗試了幾個解決方案，包括事件處理程序 - 地圖和每個引腳的'mouseout'，'mouseover'事件的不同組合。對於這些方法，我遇到了一些問題：有時事件處理程序沒有按預期方式調用，並且在將鼠標懸停在圖釘上之後，我的光標仍然粘在指針上，將cusrsor恢復爲拖放操作，需要我引用bing的自定義光標（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'});

來源

2014-04-01 11:04:49 Dmitriy

在Bing Maps中將光標設置爲張開的手

回答

相關問題