Google Maps API V3：展示整个世界 [英] Google Maps API V3: Show the whole world

查看：67
本文介绍了Google Maps API V3：展示整个世界的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

  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），//地图左上角新增google。 maps.LatLng（-85，180）//右下角）; 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> < /头> <身体GT; < div id =map>< / div>
$ b 

   //地图缩放级别应该是1


How can I programmatically zoom the map so that it covers the whole world?

解决方案 

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

这篇关于Google Maps API V3：展示整个世界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆