У V2 був спосіб обмежити панорамування / перетягування, щоб карта залишалася в певних межах. Як це робиться у V3?
Скажімо, я хочу, щоб користувачі дивились лише на Європу. Я вже обмежив масштабування, але якщо я дозволяю перетягування (що мені потрібно в цьому випадку з інших причин), тоді користувач може рухатись за межі області, яку я хочу показати.
Будь ласка, дайте робочий приклад або фрагмент коду - я не фахівець із кодування ...
Відповіді:
Я думаю, я трохи запізнився на вечірку, але оскільки це було саме те, що мені потрібно було зараз І Я вдосконалив це, я все-таки подумав, що опублікую відповідь.
Як за допомогою відповідей Даніеля Вассалло, так і Брендо , користувач все ще може використовувати панель управління (якщо вона активована), щоб відійти від зони, яку розшукують. Річ @ Yauhen.F згадується в коментарі.
Тому замість використання події dragend я використовую подію center_changed. Це постійно спрацьовує під час перетягування, і кожен раз, коли хтось використовує елемент управління панорамуванням.
// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(70.33956792419954, 178.01171875),
new google.maps.LatLng(83.86483689701898, -88.033203125)
);
var lastValidCenter = map.getCenter();
google.maps.event.addListener(map, 'center_changed', function() {
if (allowedBounds.contains(map.getCenter())) {
// still within valid bounds, so save the last valid position
lastValidCenter = map.getCenter();
return;
}
// not valid anymore => return to last valid position
map.panTo(lastValidCenter);
});
Зберігаючи останню дійсну позицію безперервно під час перетягування, рух просто зупиниться, коли воно вийде за межі, замість того, щоб повертати назад після закінчення перетягування. ......
center_changedподія є ключовою. Але на мобільних пристроях (iOS) все ще є деякі проблеми.
map.setCenter(...);більш доречним, ніж map.panTo(...);? Останнє здається потенційно екстравагантним (CPU), враховуючи, що його метою є не що інше, як зупинити панорамування мертвих на своїх слідах.
Фокус полягає в тому, щоб прослухати dragendподію, і якщо карта перетягується за межі дозволених меж, поверніть її назад всередину. Якщо ви визначите дозволені межі як LatLngBoundsоб'єкт, ви можете використовувати contains()метод, оскільки він повертає true, якщо заданий аргумент lat / lng знаходиться в межах.
Також важливо обмежити рівень масштабування, але, здається, ви вже робите це.
Тому ви можете спробувати наступний приклад:
<!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>
Знімок екрана з наведеного вище прикладу. Користувач не зможе перетягнути далі на південь чи далеко на схід:
Моя версія, заснована на версії @HenningJ, але з деякими змінами, lastValidCenterщоб забезпечити плавне перетягування по краях меж.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(28.70, -127.50),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(28.70, -127.50),
new google.maps.LatLng(48.85, -55.90)
);
var boundLimits = {
maxLat : allowedBounds.getNorthEast().lat(),
maxLng : allowedBounds.getNorthEast().lng(),
minLat : allowedBounds.getSouthWest().lat(),
minLng : allowedBounds.getSouthWest().lng()
};
var lastValidCenter = map.getCenter();
var newLat, newLng;
google.maps.event.addListener(map, 'center_changed', function() {
center = map.getCenter();
if (allowedBounds.contains(center)) {
// still within valid bounds, so save the last valid position
lastValidCenter = map.getCenter();
return;
}
newLat = lastValidCenter.lat();
newLng = lastValidCenter.lng();
if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){
newLng = center.lng();
}
if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){
newLat = center.lat();
}
map.panTo(new google.maps.LatLng(newLat, newLng));
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
Скрипка тут: http://jsfiddle.net/koenpunt/n7h6t/
Ось приємне розширення до вищезазначеного, яке поверне центр Карти до останньої дійсної позиції, прослухавши подію dragstart.
// Limit panning
var lastCenter = map.getCenter();
google.maps.event.addListener(map, 'dragstart', function() {
lastCenter = map.getCenter();
});
google.maps.event.addListener(map, 'dragend', function() {
if(allowedBounds.contains(map.getCenter())) return;
map.setCenter(lastCenter);
});
Найкращим методом обмеження є встановлення рівня масштабування та центральної точки та вимкнення елементів керування, таких як масштабування, прокрутка тощо, як показано нижче.
var latlng = new google.maps.LatLng(18.283078,84.047556);
var myOptions = {
zoom: 12,
center: latlng,
zoomControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
disableDoubleClickZoom: true,
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Ось рішення, яке є поєднанням відповіді Тома Андерсена та прийнятої в даний час відповіді Хеннінга. Перевагами цього є те, що 1) дозволяє плавніше прокручувати по краях (з чим рішення HenningJ здавалося незграбним), і 2) не має жодних проблем при збільшенні масштабу за межі області (знову ж здається, відповідь HenningJ порушується при масштабуванні і біля меж).
Відповідь Тома була близькою до роботи для мене, за винятком того, що вона розташувала заблоковану область в центрі екрана, що не було прийнятним для програми, над якою я працював.
// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(70.33956792419954, 178.01171875),
new google.maps.LatLng(83.86483689701898, -88.033203125)
);
var lastValidCenter = map.getCenter();
google.maps.event.addListener(map, 'center_changed', function() {
var mapBounds = map.getBounds();
var mapNe = mapBounds.getNorthEast();
var mapSw = mapBounds.getSouthWest();
var center = map.getCenter();
if( allowedBounds.contains(mapNe) && allowedBounds.contains(mapSw) ) {
//the user is scrolling within the bounds.
lastValidCenter = center;
return;
}
//the user has scrolled beyond the edge.
var mapWidth = mapNe.lng() - mapSw.lng();
var mapHeight = mapNe.lat() - mapSw.lat();
var x = center.lng();
var y = center.lat();
var maxX = allowedBounds.getNorthEast().lng();
var maxY = allowedBounds.getNorthEast().lat();
var minX = allowedBounds.getSouthWest().lng();
var minY = allowedBounds.getSouthWest().lat();
//shift the min and max dimensions by 1/2 of the screen size, so the bounds remain at the edge of the screen
maxX -= (mapWidth / 2);
minX += (mapWidth / 2);
maxY -= (mapHeight / 2);
minY += (mapHeight / 2);
if (x < minX) {
x = minX;
}
if (x > maxX) {
x = maxX;
}
if (y < minY){
y = minY;
}
if (y > maxY){
y = maxY;
}
map.panTo(new google.maps.LatLng(y, x));
});
Нова версія API Google Map тепер пропонує спосіб обмеження меж. Просто вкажіть межі обмежень під час ініціалізації карти. Наприклад, якщо ви хочете обмежити межу лише Ньюзелендом, ось як ви це робите:
<body>
<div id="map"></div>
<script>
var map;
var NEW_ZEALAND_BOUNDS = {
north: -34.36,
south: -47.35,
west: 166.28,
east: -175.81,
};
var AUCKLAND = {lat: -37.06, lng: 174.58};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: AUCKLAND,
restriction: {
latLngBounds: NEW_ZEALAND_BOUNDS,
strictBounds: false,
},
zoom: 7,
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
FYI: Щоб обмежити карту всього світу, ви можете використовувати наступні межі. Хитра частина тут полягає у використанні strictBounds:true. Це гарантує, що користувач не зможе зменшити масштаб світогляду:
map = new google.maps.Map(document.getElementById('map'), {
restriction: {
latLngBounds: {
north: 85,
south: -85,
west: -180,
east: 180
},
strictBounds: true,
},
zoom: 7,
});
Є ще одна нитка на цю тему, яка теж дуже хороша. Проблема, яку мені довелося вирішити, полягала в тому, що замість того, щоб встановлювати межі вручну та перевіряти утримання центру, я хотів встановити межу при завантаженні сторінки, а потім дозволити перетягування до краю, якщо збільшено.
Тож я встановив межі панорамування при завантаженні карти один раз. Потім я перевіряю, чи на карті все ще максимальне збільшення, і якщо так, повертаю початковий центр. Якщо збільшено, я хочу панорамувати до краю початкових меж, а не просто перевірити, чи міститься ЦЕНТР, оскільки це збільшить дозволене панорамування на половину області перегляду.
На жаль, незважаючи на те, що це робить роботу і працює нормально, коли панорамування здійснюється повільно, це трохи відхиляється, якщо ви швидко рухаєтеся.
Якщо у вас є пропозиції щодо того, як цього можна уникнути, я буду вдячний.
map = new google.maps.Map( // defaults
document.getElementById("map22"),
{
disableDefaultUI : true,
zoomControl : true,
zoom : 7,
minZoom : 7,
maxZoom : 10,
center : new google.maps.LatLng(
64.99473104134819,
-19.22332763671875
),
mapTypeId : google.maps.MapTypeId.ROADMAP
}
);
function borders(){
return {
maxLat : map.getBounds().getNorthEast().lat(),
maxLng : map.getBounds().getNorthEast().lng(),
minLat : map.getBounds().getSouthWest().lat(),
minLng : map.getBounds().getSouthWest().lng(),
center : map.getCenter()
}
}
google.maps.event.addListenerOnce(map,'idle',function() {
limit = borders();
});
google.maps.event.addListener(map,'drag',function() {
if(map.getZoom() == 7) return map.setCenter(limit.center);
current = borders();
if( current.maxLng < limit.maxLng && current.minLng > limit.minLng ) activeCenterLng = current.center.lng();
if( current.maxLat < limit.maxLat && current.minLat > limit.minLat ) activeCenterLat = current.center.lat();
map.setCenter(
new google.maps.LatLng(
activeCenterLat,
activeCenterLng
)
);
});
Я спробував відповідь від HenningJ, і карта не перестала б рухатись, поки центр не опинився в кутку меж, що не було ідеально. Ось моє рішення:
google.maps.event.addListener(map, 'center_changed', function() {
var mapBounds = map.getBounds();
if(allowedBounds.contains(mapBounds.getNorthEast()) && allowedBounds.contains(mapBounds.getSouthWest())) {
lastCenter = map.getCenter();
return;
}
map.panTo(lastCenter);
}, this));
Ось просте рішення, яке буде працювати на мобільних та настільних комп’ютерах. Це зупинить панорамування карти за межами максимальної чи мінімальної широти світу і дозволить встановити мінімальний рівень масштабування, що може допомогти запобігти появі сірих ділянок через занадто масштабування (залежно від розміру, встановленого для вашої карти):
(Я рекомендую з обережністю використовувати подію center_changed, як запропоновано у прийнятій відповіді HenningJ. У моєму випадку кількість подій, які це створює, спричинило помилки переповнення стека в Google Chrome. Натомість можна використовувати подію "dragend", хоча це дозволить користувач перетягне за межі областей, а потім негайно `` повернеться назад '' до дійсної області карти).
var lastValidCenter;
var minZoomLevel = 2;
setOutOfBoundsListener();
function setOutOfBoundsListener() {
google.maps.event.addListener(map, 'dragend', function () {
checkLatitude(map);
});
google.maps.event.addListener(map, 'idle', function () {
checkLatitude(map);
});
google.maps.event.addListener(map, 'zoom_changed', function () {
checkLatitude(map);
});
};
function checkLatitude(map) {
if (this.minZoomLevel) {
if (map.getZoom() < minZoomLevel) {
map.setZoom(parseInt(minZoomLevel));
}
}
var bounds = map.getBounds();
var sLat = map.getBounds().getSouthWest().lat();
var nLat = map.getBounds().getNorthEast().lat();
if (sLat < -85 || nLat > 85) {
//the map has gone beyone the world's max or min latitude - gray areas are visible
//return to a valid position
if (this.lastValidCenter) {
map.setCenter(this.lastValidCenter);
}
}
else {
this.lastValidCenter = map.getCenter();
}
}
Коли я використовую перетягування, перетягування або що завгодно, карта повертається до дозволених меж, а не просто обмежує переповнення руху. Просто змініть подію на 'center_changed', щоб не дати їй так стрибати.
Змінений jsfiddle: http://jsfiddle.net/Vjdde/1/
Редагувати: Не впевнений, чому скрипка не викликає переповнення стека, але має, оскільки setCenter знову викличе center_changed .. Просто стережіться
Рішення тут залишили мені 2 питання. Перш за все, якщо ви утримуєте клавішу зі стрілкою так, щоб вона почала швидко рухатись, коли вона потрапить у край, вона не буде проходити аж до краю, оскільки через прискорення панорамування, роблячи великі "кроки", наступна " крок "вийшов би за межі, тому він не робить цього останнього" кроку ". Отже, як тільки він зупинився, ви можете відпустити клавішу зі стрілкою, а потім натиснути її ще раз, і вона буде рухатися трохи далі. По-друге, ці рішення не містили належним чином панорамування після зміни масштабу. Мені вдалося вирішити обидва варіанти і розмістив своє рішення в іншому ланцюжку , але я подумав, що зв’яжу його сюди, оскільки саме цей потік спочатку запустив мене у правильному напрямку.
Це HenningJ - але HenningJ на ios використовує lastValidCentre - що погано, як його старий, тому я затискаю, що робить його кращим на iOS.
var mapObject = plugin_map.gmap3('get');
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(41.3957556, -88.4345472),
new google.maps.LatLng(49.4010417, -78.4286389)
);
google.maps.event.addListener(mapObject, 'center_changed', function() {
if (allowedBounds.contains(mapObject.getCenter())) {
// still within valid bounds, so save the last valid position
return;
}
// not valid anymore => return to last valid position
var c = mapObject.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;
//mapObject.setCenter(new google.maps.LatLng(y, x));
mapObject.panTo(new google.maps.LatLng(y, x));
});
Я розміщу свою відповідь на випадок, якщо комусь буде цікаво, оскільки я не міг досягти того, що мені потрібно, за допомогою будь-якого іншого рішення, розміщеного тут.
Мені потрібно було обмежити вертикальні межі (широту) карти, щоб користувач не міг панорамуватися за межі широти землі (~ +/- 85 градусів), але будь-які інші межі також працювали б.
Цей підхід використовує ту саму center_changedподію, що описана в іншому місці, і просто фіксує центр у випадку, якщо відображаються частини заборонених меж.
Цей механізм працює лише в тому випадку, якщо встановлено мінімальне масштабування карти так, щоб зменшення масштабу ніколи не могло показати більше площі, ніж у дозволених межах.
Робочий приклад: http://jsbin.com/vizihe
function initMap() {
// sample bounds, can be anything and goes hand in hand with minZoom
var northBoundary = 40
var southBoundary = -40
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0, lng: 0},
zoom: 4,
// it's important to set this to a large enough value
// so that zooming out does not show an area larger than allowed
minZoom: 4
})
map.addListener('center_changed', function () {
var bounds = map.getBounds();
var ne = bounds.getNorthEast()
var sw = bounds.getSouthWest()
var center = map.getCenter()
if(ne.lat() > northBoundary) {
map.setCenter({lat: center.lat() - (ne.lat() - northBoundary), lng: center.lng()})
}
if(sw.lat() < southBoundary) {
map.setCenter({lat: center.lat() - (sw.lat() - southBoundary), lng: center.lng()})
}
})
}
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="limit google map panning">
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
</html>
Я знаю, що трохи запізнився на вечірку, але, схоже, станом на середину 2016 року офіційний спосіб обмежити видиму зону не існує.
Є кілька рішень для обмеження меж (деякі з них у цьому питанні), але для мене вони мають недолік, оскільки вони не обмежують межі точно, щоб відповідати вигляду карти, вони обмежують лише розміщення центру карти в межах задані межі. Якщо ви хочете обмежити межі накладання зображення, як я, це може призвести до поведінки, як показано нижче, де підкладена карта видно під накладенням зображення:
Щоб вирішити цю проблему, я створив бібліотеку , яка успішно обмежує межі, тому ви не можете прокрутити накладання.
Однак, як і інші існуючі рішення, у нього є проблема "вібрації". Коли користувач досить агресивно просуває карту, після того, як вони відпускають ліву кнопку миші, карта все ще продовжує панорамування сама по собі, поступово сповільнюючись. Я завжди повертаю карту назад до меж, але це призводить до свого роду вібрації, яка осідає через мить. Цей ефект панорамування не можна зупинити жодними засобами, наданими Js API на даний момент. Здається, поки Google не додасть підтримку чогось на зразок map.stopPanningAnimation (), ми не зможемо створити плавний досвід.
Приклад використання згаданої бібліотеки, найрівномірніші строгі межі, які я зміг отримати:
function initialise(){
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(0,0),
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
addStrictBoundsImage(map);
}
function addStrictBoundsImage(map){
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(62.281819, -150.287132),
new google.maps.LatLng(62.400471, -150.005608));
var image_src = 'https://developers.google.com/maps/documentation/' +
'javascript/examples/full/images/talkeetna.png';
var strict_bounds_image = new StrictBoundsImage(bounds, image_src, map);
}<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3",{other_params:"sensor=false"});
</script>
<body style="margin:0px; padding:0px;" onload="initialise()">
<div id="map" style="height:500px; width:1000px;"></div>
<script type="text/javascript"src="https://raw.githubusercontent.com/matej-pavla/StrictBoundsImage/master/StrictBoundsImage.js"></script>
</body>
restrictionопцію для обмеження області перегляду карти. Погляньте на приклад та пояснення на stackoverflow.com/a/54717220/5140781 .