Как я ограничиваю панорамирование в API V3 карт Google?
В V2 был способ ограничить панорамирование/перетаскивание, таким образом, карта остается в определенных границах. Как это сделано в V3?
Скажем, я хочу, чтобы пользователи только посмотрели на Европу. Я уже ограничил масштабирование, но если я позволяю перетаскивать (к которому я имею в этом случае по другим причинам), затем, пользователь может панорамировать вне области, которую я хочу показать.
Дайте рабочий пример или фрагмент кода - я не опытный кодер...
1 ответ
Уловка состоит в том, чтобы прослушать событие dragend , и если карта перетаскивается за допустимые границы, переместите ее обратно внутрь. Если вы определяете допустимые границы как LatLngBounds , вы можете использовать метод contains () , поскольку он возвращает истину, если заданный аргумент широты / долготы находится в заданных пределах.
Также важно ограничить уровень масштабирования, но похоже, вы уже это делаете.
Поэтому вы можете попробовать следующий пример:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Limit Panning</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px;"></div>
<script type="text/javascript">
var minZoomLevel = 5;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(38.50, -90.50),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Bounds for North America
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(28.70, -127.50),
new google.maps.LatLng(48.85, -55.90));
// Listen for the dragend event
google.maps.event.addListener(map, 'dragend', function() {
if (allowedBounds.contains(map.getCenter())) return;
// Out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = allowedBounds.getNorthEast().lng(),
maxY = allowedBounds.getNorthEast().lat(),
minX = allowedBounds.getSouthWest().lng(),
minY = allowedBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
// Limit the zoom level
google.maps.event.addListener(map, 'zoom_changed', function() {
if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
});
</script>
</body>
</html>
Снимок экрана из приведенного выше примера. В этом случае пользователь не сможет перетащить дальше на юг или дальний восток:
