2017-09-26 19 views
0

境界内でマップをパンする必要があります。次のコードは、viewchangeendイベントに応答することによってこれを実現する1つの方法を示しています。マップが境界からパニングされている場合は、境界領域に記録された最後の位置に戻します。Bing maps - パンニングを境界領域に制限する

しかし、それは不安定です。そして、私はそれが限界に達すると単にパンニングを止めることを望みます。

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>

答えて

関連する問題