Google Maps API V3：向全世界展示

13

function initialize() { 
 

 
var mapOptions = { 
 
\t center: new google.maps.LatLng(0, 0), 
 
\t zoom: 1, 
 
\t minZoom: 1 
 
}; 
 

 
var map = new google.maps.Map(document.getElementById('map'),mapOptions); 
 

 
var allowedBounds = new google.maps.LatLngBounds(
 
\t new google.maps.LatLng(85, -180), \t // top left corner of map 
 
\t new google.maps.LatLng(-85, 180) \t // 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

来源

2013-07-24 15:23:54 Kunal

+1

'swt'和'nor'是未使用的变量。在粘贴之前请清理代码。 – developerbmw 2015-11-25 00:05:41

+0

谢谢@developerbmw – Kunal 2015-11-27 05:12:36

+0

我在Android本身上试过这个解决方案，但我得到一个异常：“java.lang.IllegalArgumentException：南纬超过北纬（85.0> -85.0）”。切换坐标后，它没有崩溃，但它仍然不显示整个世界。怎么来的？这里有一个关于它的问题：http://stackoverflow.com/q/42329186/878126 – 2017-02-21 09:59:10

5

创建新地图实例时，可以指定缩放级别。

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

变焦值越低，你看地图，所以1或2的值越应该显示整个地球（取决于您的地图画布的大小）。创建地图后，您可以拨打：

map.setZoom(8);

要更改缩放级别。

来源

2012-03-27 19:21:27 javram

+1

的问题是，画布的大小是相对于窗口尺寸。所以它能很好地说出它应该显示从坐标A到坐标B的所有内容。 – Nocklas 2012-03-28 09:33:16

+2

此外，选项对象缺少'center'属性，根据[官方文档]（https ：//developers.google.com/maps/documentation/javascript/reference？hl = en＃MapOptions）是必需的。 – 2012-09-29 22:35:35

-2

此问题的解决方案是在地图对象上使用fitBounds方法并指定适当的边界。

来源

2012-12-04 22:31:33 Nocklas

+4

你使用的界限是什么？ – httpete 2013-02-08 14:49:13

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>

来源

2015-04-17 12:42:03

Google Maps API V3：向全世界展示

回答

相关问题