Kể từ giữa năm 2016 , không có cách chính thức nào để hạn chế khu vực có thể xem. Tuy nhiên, hầu hết các giải pháp đặc biệt để hạn chế các giới hạn đều có một lỗ hổng, bởi vì chúng không giới hạn các giới hạn một cách chính xác để vừa với chế độ xem bản đồ, chúng chỉ hạn chế nó nếu tâm bản đồ nằm ngoài các giới hạn đã chỉ định. Nếu bạn muốn hạn chế giới hạn đối với hình ảnh lớp phủ như tôi, điều này có thể dẫn đến hành vi như được minh họa bên dưới, nơi bản đồ lớp phủ hiển thị dưới lớp phủ hình ảnh của chúng tôi:
Để giải quyết vấn đề này, tôi đã tạo một thư viện , thư viện này giới hạn thành công các giới hạn để bạn không thể di chuyển ra khỏi lớp phủ.
Tuy nhiên, như các giải pháp hiện có khác, nó có một vấn đề "rung". Khi người dùng xoay bản đồ đủ mạnh, sau khi họ thả nút chuột trái, bản đồ vẫn tiếp tục tự quay, dần dần chậm lại. Tôi luôn đưa bản đồ trở lại giới hạn, nhưng điều đó dẫn đến rung động. Hiện tại, không thể dừng hiệu ứng xoay này bằng bất kỳ phương tiện nào do API Js cung cấp. Có vẻ như cho đến khi google thêm hỗ trợ cho một cái gì đó như map.stopPanningAnimation (), chúng tôi sẽ không thể tạo ra trải nghiệm mượt mà.
Ví dụ bằng cách sử dụng thư viện đã đề cập, trải nghiệm giới hạn nghiêm ngặt mượt mà nhất mà tôi có thể nhận được:
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>
Thư viện cũng có thể tự động tính toán giới hạn thu phóng tối thiểu. Sau đó, nó hạn chế mức thu phóng bằng cách sử dụngminZoom thuộc tính của bản đồ.
Hy vọng rằng điều này sẽ giúp những người muốn một giải pháp hoàn toàn tôn trọng các ranh giới đã cho và không muốn cho phép di chuyển ra khỏi chúng.
if (x < minX) x = minX;vàif (x > maxX) x = maxX;không loại trừ nhau? Tại sao bạn căn giữa canvas trên các tọa độ minX / maxX và maxX / maxY mặc dù chúng không phải là tọa độ của tâm?