Bing 地图 - 将平移限制在边界区域
Bing maps - restrict panning to a boundary area
我们需要让用户在边界内平移地图。以下代码演示了一种通过响应 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>
是的,在加载地图时将 maxBounds 属性 设置为要将地图视图限制在其中的边界框。这是一个代码示例:https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk#maxBounds+JS
我们需要让用户在边界内平移地图。以下代码演示了一种通过响应 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>
是的,在加载地图时将 maxBounds 属性 设置为要将地图视图限制在其中的边界框。这是一个代码示例:https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk#maxBounds+JS