Как я могу программно масштабировать карту так, чтобы она охватывала весь мир?
API Карт Google V3: показать весь мир
Ответ 1
function initialize () {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 1,
minZoom: 1
};
var map = new google.maps.Map(document.getElementById('map'),mapOptions );
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(85, -180), // top left corner of map
new google.maps.LatLng(-85, 180) // bottom right corner
);
var k = 5.0;
var n = allowedBounds .getNorthEast().lat() - k;
var e = allowedBounds .getNorthEast().lng() - k;
var s = allowedBounds .getSouthWest().lat() + k;
var w = allowedBounds .getSouthWest().lng() + k;
var neNew = new google.maps.LatLng( n, e );
var swNew = new google.maps.LatLng( s, w );
boundsNew = new google.maps.LatLngBounds( swNew, neNew );
map .fitBounds(boundsNew);
}
google.maps.event.addDomListener(window, 'load', initialize);
#map {
width: 500PX;
height: 500px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Ответ 2
При создании нового экземпляра карты вы можете указать уровень масштабирования.
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Чем ниже значение масштабирования, тем больше отображается карта, поэтому значение 1 или 2 должно отображать весь земной шар (в зависимости от размера вашего холста карты). После создания карты вы можете позвонить:
map.setZoom(8);
Чтобы изменить уровень масштабирования.
Ответ 3
Не гарантируется отсутствие повторений, но, злоупотребляя тем фактом, что базовая плитка начинается с 256 (масштабирование 0) и удваивается при каждом приращении там - вы можете выбрать оптимальный уровень масштабирования с помощью функции логарифма.
function initialize () {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: Math.ceil(Math.log2($(window).width())) - 8,
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
#map {
width: 100%;
height: 500px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Ответ 4
Решение этой проблемы состояло в том, чтобы использовать метод fitBounds на объекте карты и указать соответствующие границы.