Question

我们需要让用户在边界内平移地图。以下代码演示了通过响应viewchangeend事件来实现此目的的一种方法。如果地图已经从边界平移，则会将该位置重置回边界区域中记录的最后位置。

然而，这是跳跃的。而且我希望一旦达到边界就停止平移。

有没有办法用Bing地图完成这个？

var map;
var LastValidLocation, PanningRectLimit;

function GetMap() {

  var mapOptions = {
    center: new Microsoft.Maps.Location(29.771261, -95.364891),
    credentials: 'a valid api key',
    disableKeyboardInput: true,
    disableScrollWheelZoom: true,
    disableStreetside: true,
    disableZooming: true,
    enableClickableLogo: false,
    mapTypeId: Microsoft.Maps.MapTypeId.aerial,
    showDashboard: false,
    showScalebar: false,
    showTermsLink: false,
    tileBuffer: 2,
    zoom: 10
  };

  map = new Microsoft.Maps.Map(document.getElementById('myMap'), mapOptions);

  var pushpin = new Microsoft.Maps.Pushpin(map.getCenter());
  var layer = new Microsoft.Maps.Layer();
  layer.add(pushpin);
  map.layers.insert(layer);

  LastValidLocation = map.getCenter();
  PanningRectLimit = Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(29.941359, -95.662621), new Microsoft.Maps.Location(29.583220, -95.077050));

  Microsoft.Maps.Events.addHandler(map, 'viewchangestart', function(args) {});
  Microsoft.Maps.Events.addHandler(map, 'viewchange', function(args) {});
  Microsoft.Maps.Events.addHandler(map, 'viewchangeend', function(args) {
    restrictZoom();
  });
}

function restrictZoom() {
  var CurrentCenter = map.getCenter();
  if (PanningRectLimit.contains(CurrentCenter)) {
    LastValidLocation = CurrentCenter;
  } else {
    map.setView({
      center: LastValidLocation
    });
  };
};

$(document).ready(function() {
  $('#centerButton').click(function() {
    map.setView({
      center: new Microsoft.Maps.Location(29.771261, -95.364891)
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.bing.com/api/maps/mapcontrol?callback=GetMap"></script>
<div id="myMap" style="width: 800px; height: 600px;"></div>
<button id="centerButton">Center</button>

Answer 1

是的，在加载地图时，将maxBounds属性设置为要在其中限制地图视图的边界框。以下是代码示例：https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk#maxBounds+JS

Bing地图 - 限制平移到边界区域

1 个答案: