Google Maps API V3:向全世界展示

Noc*_*las 21 google-maps

如何以编程方式缩放地图以覆盖整个世界?

Kun*_*nal 13

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);
Run Code Online (Sandbox Code Playgroud)
#map {
    width: 500PX;
    height: 500px;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

// map zoom level should be 1
Run Code Online (Sandbox Code Playgroud)

  • `swt` 和 `nor` 是未使用的变量。请在粘贴之前清理代码。 (2认同)

jav*_*ram 5

创建新地图实例时,您可以指定缩放级别.

    var myOptions = {
      zoom:7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Run Code Online (Sandbox Code Playgroud)

缩放值越低,您看到的地图越多,因此值1或2应显示整个地球(取决于地图画布的大小).创建地图后,您可以致电:

map.setZoom(8);
Run Code Online (Sandbox Code Playgroud)

要更改缩放级别.

  • 问题在于画布的大小是相对于窗口大小的。因此,如果能够说它应该显示从坐标 A 到坐标 B 的所有内容,那就太好了。 (2认同)
  • 此外,options对象缺少`center`属性,根据[官方文档](https://developers.google.com/maps/documentation/javascript/reference?hl=en#MapOptions),该属性是必需的. (2认同)