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 回答