2016'nın ortalarından itibaren , görüntülenebilir alanı kısıtlamanın resmi bir yolu yoktur. Sınırları kısıtlamaya yönelik çoğu geçici çözümün bir kusuru olsa da, sınırları tam olarak harita görünümüne sığacak şekilde kısıtlamadıkları için, yalnızca haritanın merkezi belirtilen sınırların dışındaysa sınırlarlar. Sınırları benim gibi üst üste binen görüntüyle sınırlamak istiyorsanız, bu, aşağıda gösterildiği gibi, altta yatan haritanın görüntü bindirmemizin altında göründüğü bir davranışla sonuçlanabilir:
Bu sorunu çözmek için , bindirmenin dışına çıkamayacağınız şekilde sınırları başarıyla kısıtlayan bir kitaplık oluşturdum .
Ancak, diğer mevcut çözümlerde olduğu gibi, bir "titreşim" sorunu var. Kullanıcı haritayı yeterince agresif bir şekilde kaydırdığında, farenin sol düğmesini bıraktıktan sonra, harita yavaş yavaş kendi kendine kaydırmaya devam eder. Haritayı her zaman sınırlara geri döndürürüm, ama bu bir tür titreşime neden olur. Bu kaydırma etkisi, şu anda Js API tarafından sağlanan herhangi bir yöntemle durdurulamaz. Görünüşe göre Google, map.stopPanningAnimation () gibi bir şey için destek ekleyene kadar sorunsuz bir deneyim oluşturamayacağız.
Söz konusu kitaplığı kullanarak elde ettiğim en sorunsuz katı sınır deneyimi örneği:
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>
Kütüphane ayrıca minimum yakınlaştırma sınırlamasını otomatik olarak hesaplayabilir. Daha sonra minZoomharitanın özelliğini kullanarak yakınlaştırma seviyesini sınırlar .
Umarım bu, verilen sınırlara tam anlamıyla saygı duyan ve bunların dışına çıkılmasına izin vermek istemeyen bir çözüm isteyen birine yardımcı olur.
if (x < minX) x = minX;veif (x > maxX) x = maxX;birbirini dışlamaz mı? Neden tuvali minX / maxX ve maxX / maxY koordinatlarında ortalıyorsunuz ama bunlar merkezin koordinatları değil?