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：向全世界展示

回答

相關問題