0

私は Bing Maps v7 を使用しており、ドラッグ可能な画鋲を作成しました。ここからコードを取得しました。

http://www.garzilla.net/vemaps/Draggable-Push-Pins-with-Bing-Maps-7.aspx

表示されているマップ エリアの外へのドラッグを制限する必要があります。

ズーム パンを無効にし、ユーザーがそこにピンを配置できるドラッグ可能なピンを使用して定義されたマップ エリアがあります。

問題:画鋲をマップの外にドラッグすると、元に戻すオプションがありません。

4

1 に答える 1

0

クラスには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>
于 2013-06-10T11:21:56.660 に答える