Hingga pertengahan 2016 , tidak ada cara resmi untuk membatasi area yang dapat dilihat. Sebagian besar solusi ad-hoc untuk membatasi batas memiliki kekurangan, karena mereka tidak membatasi secara tepat agar sesuai dengan tampilan peta, mereka hanya membatasinya jika pusat peta berada di luar batas yang ditentukan. Jika Anda ingin membatasi batas ke gambar overlay seperti saya, ini dapat mengakibatkan perilaku seperti yang diilustrasikan di bawah ini, di mana peta yang mendasari terlihat di bawah hamparan gambar kami:
Untuk mengatasi masalah ini, saya telah membuat perpustakaan , yang berhasil membatasi batas sehingga Anda tidak dapat keluar dari hamparan.
Namun, seperti solusi lain yang ada, ini memiliki masalah "bergetar". Saat pengguna menggeser peta dengan cukup agresif, setelah mereka melepaskan tombol kiri mouse, peta masih terus menggeser dengan sendirinya, secara bertahap melambat. Saya selalu mengembalikan peta ke batas, tetapi itu menghasilkan semacam getaran. Efek panning ini tidak dapat dihentikan dengan cara apa pun yang disediakan oleh Js API saat ini. Tampaknya hingga Google menambahkan dukungan untuk sesuatu seperti map.stopPanningAnimation (), kami tidak akan dapat menciptakan pengalaman yang mulus.
Contoh menggunakan pustaka yang disebutkan, pengalaman batas ketat paling halus yang bisa saya dapatkan:
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>
Perpustakaan juga dapat menghitung batasan zoom minimum secara otomatis. Kemudian membatasi tingkat zoom menggunakan minZoomatribut peta.
Mudah-mudahan ini membantu seseorang yang menginginkan solusi yang sepenuhnya menghormati batasan yang diberikan dan tidak ingin membiarkannya keluar.
if (x < minX) x = minX;danif (x > maxX) x = maxX;tidak mengecualikan satu sama lain? Mengapa Anda memusatkan kanvas pada koordinat minX / maxX dan maxX / maxY meskipun keduanya bukan koordinat pusat?