Google Maps API V3: показать весь мир - PullRequest
Новая
       10

Google Maps API V3: показать весь мир

21 голосов
/ 27 марта 2012

Как программно увеличить карту так, чтобы она покрывала весь мир?

Ответы [ 5 ]

14 голосов
/ 24 июля 2013 

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>
// map zoom level should be 1
5 голосов
/ 27 марта 2012

При создании нового экземпляра карты вы можете указать уровень масштабирования. 

    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 голосов
/ 17 апреля 2015

Не обязательно не иметь повторов, но злоупотребляя тем, что базовая плитка начинается с 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>
0 голосов
/ 10 июля 2018

Вот функция worldViewFit Мне нравится использовать: 

function initMap() {
    var mapOptions = {
        center: new google.maps.LatLng(0, 0),
        zoom: 1,
        minZoom: 1
    };
    map = new google.maps.Map(document.getElementById('officeMap'), mapOptions);
    google.maps.event.addListenerOnce(map, 'idle', function() {
        //Map is ready
        worldViewFit(map);
    });
}
function worldViewFit(mapObj) {
    var worldBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(70.4043,-143.5291),  //Top-left
        new google.maps.LatLng(-46.11251, 163.4288)  //Bottom-right
    );
    mapObj.fitBounds(worldBounds, 0);
    var actualBounds = mapObj.getBounds();
    if(actualBounds.getSouthWest().lng() == -180 && actualBounds.getNorthEast().lng() == 180) {
        mapObj.setZoom(mapObj.getZoom()+1);
    }
}
0 голосов
/ 05 декабря 2012

Решением этой проблемы было использование метода fitBounds для объекта карты и указание соответствующих границ.

...