クラスにはPushpin
、ドラッグの開始、ドラッグ、およびドラッグの終了時に実行されるアクションを管理するためのいくつかのイベントがあります。MSDN を参照してください: http://msdn.microsoft.com/en-us/library/gg427615.aspx
したがって、簡単に言うと、選択したイベントを処理し (あなたの場合drag
は画鋲で使用することをお勧めします)、イベントをキャンセルするか、画鋲の場所を自分で変更するだけです。
画鋲が最小緯度値に制限されている実際の例を参照してください (ドラッグ イベントを更新して、現在のマップ ビューに基づいて特定の領域に制限できるようにすることができます)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bing Maps AJAX V7 - Restricted draggable pushpin</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
var minLatitude = 49;
function getMap()
{
map = new Microsoft.Maps.Map(document.getElementById('myMap'),
{
credentials: 'YOURKEY',
center: new Microsoft.Maps.Location(50, 3),
zoom: 6
});
}
function addDraggablePushpin()
{
var pushpinOptions = {draggable: true};
var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions);
map.entities.push(pushpin);
Microsoft.Maps.Events.addHandler(pushpin, 'drag', function() {
var loc = pushpin.getLocation();
// Verify if it's in a certain area if not, cancel event
if(loc.latitude < minLatitude) {
pushpin.setLocation(new Microsoft.Maps.Location(minLatitude, loc.longitude));
}
});
}
</script>
</head>
<body onload="getMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
<div>
<input type="button" value="AddDraggablePushpin" onclick="addDraggablePushpin();" />
</div>
</body>
</html>