По состоянию на середину 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 атрибута карты.
Надеюсь, это поможет кому-то, кто хочет решения, которое полностью уважает данные границы, и не хочет допускать панорамирование из них.