По состоянию на середину 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:400px; width:500px;"></div>
<script type="text/javascript"src="https://raw.githubusercontent.com/matej-pavla/StrictBoundsImage/master/StrictBoundsImage.js"></script>
</body>
Библиотека также может автоматически рассчитывать минимальное ограничение масштабирования. Затем он ограничивает уровень масштабирования с помощью minZoomатрибута карты.
Надеюсь, это поможет кому-то, кто хочет решения, которое полностью уважает заданные границы и не хочет выходить за их пределы.
if (x < minX) x = minX;иif (x > maxX) x = maxX;не исключают друг друга? Почему вы центрируете холст по координатам minX / maxX и maxX / maxY, хотя они не являются координатами центра?