我正在使用Bing Maps AJAX V7 map API进行开发,我正在尝试将光标设置为不同的东西,同时将鼠标悬停在不同的地图元素上.例如,当鼠标滚过图钉时,这就是我正在做的事情:
Microsoft.Maps.Events.addHandler(g_map, "mousemove", function (event) {
if (event.targetType === "pushpin") {
g_map.getRootElement().style.cursor = "pointer";
}
});
我无法弄清楚的是如何在用户将鼠标移出图钉后恢复正常功能.我想也许可以将光标设置为鼠标中心上的指针,然后返回鼠标左边的非指针,但我不确定这是不是最好的方法.
您正在基本地图上使用该事件,因此我建议在图钉本身上绑定事件,以避免对此特定事件进行不必要的调用.
但是如果你想更新你的代码,这里有一个真正有用的完整例子,因为'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>
| 归档时间： |
|
| 查看次数： |
2935 次 |
| 最近记录： |