В среднем 2016 году, нет никакого официального способа ограничить видимую область. Однако большинство специальных решений для ограничения границ имеют недостаток, поскольку, поскольку они не ограничивают границы точно, чтобы соответствовать представлению карты, они ограничивают это только в том случае, если центр карты выходит за пределы указанных границ. Если вы хотите, чтобы ограничить рамки для наложения изображения, как я, это может привести к поведению, как Показанные ниже, где карта нижележащей видна при нашем изображении наложения:
Чтобы решить эту проблему, у меня есть создал library, который успешно ограничивает границы, поэтому вы не можете вырезать из наложения.
Однако, как и другие существующие решения, он имеет «вибрационную» проблему. Когда пользователь набирает карту достаточно агрессивно, после отпускания левой кнопки мыши карта по-прежнему продолжает панорамирование сама по себе, постепенно замедляя ее. Я всегда возвращаю карту обратно в границы, но это приводит к вибрации. Этот эффект панорамирования не может быть остановлен никакими средствами, предоставляемыми 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){
\t var bounds = new google.maps.LatLngBounds(
\t \t new google.maps.LatLng(62.281819, -150.287132),
\t \t new google.maps.LatLng(62.400471, -150.005608));
\t var image_src = 'https://developers.google.com/maps/documentation/' +
\t \t 'javascript/examples/full/images/talkeetna.png';
\t 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()">
\t <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 maxX) x = maxX;' не исключают друг друга? Почему вы центрируете холст на координатах minX/maxX и maxX/maxY, хотя они не являются координатами центра? –
Вместо события 'dragend' вы можете использовать' draggable: false' на экземпляре карты ([рабочий пример] (http://jsfiddle.net/32pc6f5v/)) – machineaddict
Это не очень хорошая методика использования события «zoom_changed» для ограничить пользователя. Поскольку первый раз он всегда выходит за пределы минимального уровня, а затем используя ваш код, вы снова устанавливаете мини-зум, который будет отображаться на экране. –