2017-09-26 78 views
0

我們需要讓用戶平移邊界內的地圖。以下代碼演示了通過響應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>

回答