2017-09-26 5 views
0

사용자가 경계 내에서지도를 이동하게해야합니다. 다음 코드는 viewchangeend 이벤트에 응답하여이를 수행하는 한 가지 방법을 보여줍니다. 맵이 경계 밖으로 패닝 된 경우 경계 영역에 기록 된 마지막 위치로 다시 설정됩니다.빙지도 - 경계 영역으로 이동 제한

그러나 그것은 급격합니다. 그리고 일단 경계에 도달하면 패닝 작업을 중단하고 싶습니다.

빙지도로이를 수행 할 수있는 방법이 있습니까?

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>

답변