當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

类型缩放Google map 地图类型

發布時間：2023/12/18 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了类型缩放Google map 地图类型小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

上班之余抽點時間出來寫寫博文，希望對新接觸的朋友有幫助。今天在這里和大家一起學習一下類型縮放

????

輿圖類型

基本輿圖類型

????

45° 圖像

啟用和停用 45° 圖像

旋轉 45° 圖像

修改輿圖類型注冊表

樣式化輿圖

自定義輿圖類型

輿圖坐標

世界坐標

像素坐標

圖塊坐標

MapType 接口

基本輿圖類型

疊加層輿圖類型

圖片輿圖類型

自定義投影

實現投影接口

投影中的坐標轉換

投影中的圖塊選擇

????

輿圖類型

????本文檔介紹了您可以使用 Google Maps JavaScript API 表示的輿圖類型。該 API 使用了 MapType 對象來存儲這些輿圖的相關信息。MapType 是一種接口，可用于定義輿圖圖塊的表示方法和使用方法，以及坐標系從屏幕坐標轉換到世界坐標（輿圖上）的方法。每個 MapType 都必須包括一些用于處理圖塊檢索和釋放的方法，以及用于定義圖塊視覺行為的屬性。

????Maps API 中輿圖類型的內部工作原理是一個較為龐雜的主題。大部分開發者可以只使用下述的基本輿圖類型。不過，您也可以使用自定義輿圖類型來定義自己的輿圖圖塊，或者使用樣式化輿圖來修改現有輿圖類型的表示形式。供給自定義輿圖類型時，您需要懂得如何修改輿圖的輿圖類型注冊表。

????

基本輿圖類型

????Google Maps API 中供給了多種輿圖類型。除了用戶熟習的“繪制”道路輿圖圖塊，Google Maps API 也支持其他輿圖類型。

????Google Maps API 中供給了以下輿圖類型：

????

MapTypeId.ROADMAP，用于表示默許的道路輿圖視圖
MapTypeId.SATELLITE，用于表示 Google 地球衛星圖片
MapTypeId.HYBRID，用于同時表示一般視圖和衛星視圖
MapTypeId.TERRAIN，用于根據地形信息表示現實輿圖。

????要通過 Map 修改正在使用的輿圖類型，您可以為其設置 mapTypeId 屬性，方法是：在結構函數內設置其 Map options 對象，或者調用輿圖的 setMapTypeId() 方法。

????根據結構函數設置 mapTypeId：

var myLatlng = new google.maps.LatLng(-34.397, 150.644); var mapOptions = {zoom: 8,center: myLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

????
動態修改 mapTypeId：

map.setMapTypeId(google.maps.MapTypeId.TERRAIN);

????
請注意，您現實上并沒有直接設置輿圖的輿圖類型，而是將其 mapTypeId 設為引用使用標識符的 MapType。Maps JavaScript API V3 使用輿圖類型注冊表（詳見下文）來管理這些引用

????

45° 圖像

????Google Maps API 針對特定位置支持特別的 45° 圖像。此類高分辨率圖像可供給朝向各基本方向（東南西北）的透視視圖。對于支持的輿圖類型，這些圖片還可供給更高的縮放級別。

????下圖表示了加利福尼亞州圣塔克魯茲市木板路的 45° 透視視圖：

????現有的 google.maps.MapTypeId.SATELLITE 和 google.maps.MapTypeId.HYBRID 輿圖類型支持高縮放級別的 45° 透視圖像（如果有的話）。如果您放大的位置具有此類圖像，那么這些輿圖類型將會主動通過以下方法更改其視圖：

????

輿圖上現有的任何平移控件都將會變更為在現有的導航控件四周添加一個羅盤轉輪。您可以通過該羅盤來更改恣意 45° 圖像的方向，方法是：拖動該羅盤轉輪，然后將方向對準包括圖像的最近支持方向。
一個旋轉控件將會間隙表當初現有的平移和縮放控件之間，它可用于將圖像圍繞支持方向旋轉。旋轉控件僅支持順時針方向旋轉。
以當前位置為中央的 45° 透視圖像將會替換衛星圖像或混合圖像。默許情況下，此類視圖會朝向北方。如果您縮小輿圖，則輿圖會重新表示默許的衛星圖像或混合圖像。
MapType 控件將啟用子菜單切換控件，用于表示 45° 圖像。

????縮小表示 45° 圖像的輿圖類型將會還原全部更改，并重新構建原始輿圖類型。

????Google 正在不斷地為更多都會添加 45° 圖像。有關最新信息，請參閱 Google 輿圖上的 45° 圖像列表。

????

啟用和停用 45° 圖像

????您可以通過在 Map 對象上調用 setTilt(0) 來停用 45° 圖像。要啟用適用于支持的輿圖類型的 45° 透視圖像，請調用 setTilt(45)。

????Map 的 getTilt() 方法將會一直反應輿圖上所表示確當前傾斜度；如果您在輿圖上設置了傾斜度后又將其刪除（例如通過縮小輿圖的方法），那么輿圖的 getTilt() 方法將會返回 0。

????以下示例表示了俄勒岡州波特蘭市中央的 45°視圖：

var mapOptions = {center: new google.maps.LatLng(37.339085, -121.8914807),zoom: 18,mapTypeId: 'satellite' }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); map.setTilt(45);

????

旋轉 45° 圖像

????現實上，45° 圖像是由朝向四個基本方向（東南西北）的一系列圖片形成的。當輿圖表示 45° 圖像時，您可以將圖像對準某個基本方向，方法是：在 Map 對象上調用 setHeading()，并傳遞一個數值以表示偏離北方的度數。

????以下示例中表示了一張航拍輿圖，在您點擊按鈕后，該輿圖會每 3 秒主動旋轉一次：

var map; function initialize() {var mapOptions = {center: new google.maps.LatLng(45.518970, -122.672899),zoom: 18,mapTypeId: google.maps.MapTypeId.SATELLITE};map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);map.setTilt(45);map.setHeading(90); }function autoRotate() {// Determine if we're showing aerial imageryif (map.getTilt() != 0) {map.setHeading(180);setTimeout('map.setHeading(270)',3000);setTimeout('map.setHeading(0)',6000);setTimeout('map.setHeading(90)',9000);} }

????

修改輿圖類型注冊表

????輿圖的 mapTypeId 是一種字符串標識符，可用于將 MapType 與獨一值關聯起來。每個 Map 對象都會保存一個 MapTypeRegistry，其中包括該輿圖的一系列可用 MapType。該注冊表用于選擇輿圖的某種控件（例如 MapType 控件）中的可用輿圖類型。

????您無法直接讀取輿圖類型注冊表，而是應該通過以下方法對注冊表停止修改：添加自定義輿圖類型并將它們與您所選擇的字符串標識符停止關聯。您無法修改或更改基本輿圖類型（但您可通過更改與響應輿圖相關聯的 mapTypeControlOptions 的表示方法來將這些類型從輿圖中刪除）。

????以下代碼將輿圖設為僅表示其 mapTypeControlOptions 中的兩種輿圖類型，并修改了注冊表，以將此標識符的關聯項添加到 MapType 接口的現實實現中。請注意：我們特意未在之前的代碼中記載自定義輿圖類型本身的創立。有關構建輿圖類型的信息，請參閱上面的樣式化輿圖或自定義輿圖類型。

// Modify the control to only display two maptypes, the // default ROADMAP and the custom 'mymap'. // Note that because this is simply an association, we // don't need to modify the MapTypeRegistry beforehand.var MY_MAPTYPE_ID = 'mymaps';var mapOptions = {zoom: 12,center: brooklyn,mapTypeControlOptions: {mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]},mapTypeId: MY_MAPTYPE_ID };// Create our map. This creation will implicitly create a // map type registry. map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);// Create your custom map type using your own code. // (See below.) var myMapType = new MyMapType();// Set the registry to associate 'mymap' with the // custom map type we created, and set the map to // show that map type. map.mapTypes.set(MY_MAPTYPE_ID, myMapType);

????

樣式化輿圖

????借助 StyledMapType，您可以自定義 Google 標準基本輿圖的表示方法，并更改道路、公園和建筑物區域等元素的視覺表示效果，以反應出與默許輿圖類型中所使用的不同的樣式。

????有關 StyledMapType 的信息，請參閱該開發者指南中的樣式化輿圖部分。

????

自定義輿圖類型

????當初，Google Maps JavaScript API V3 支持自定義輿圖類型的表示和管理，可以讓您實現自己的輿圖圖像或圖塊疊加層。

????V3 API 中供給了以下幾種可能的輿圖類型實現：

????

標準圖塊集，其中所包括的圖片獨特形成了完全的制圖輿圖。這些圖塊集也稱為基本輿圖類型。這些輿圖類型的行為和表示與現有的默許輿圖類型相似：ROADMAP、SATELLITE、HYBRID 和 TERRAIN。您可以在輿圖的 mapTypes 數組中添加自定義輿圖類型，以允許 Maps API 中的用戶界面將您的自定義輿圖類型視為標準輿圖類型（例如通過在 MapType 控件中加入自定義輿圖類型）。
圖片圖塊疊加層，表當初現有基本輿圖類型之上。平日，這些輿圖類型用于擴展現有輿圖類型以表示更多信息，并常常受限于特定的位置和/或縮放級別。請注意，這些圖塊可以是透明的，以便您將輿圖項添加到現有輿圖中。
非圖片的輿圖類型，可以讓您處理如何表示最基本級別的輿圖信息。

????以上每個選項均需先創立一個類，以實現 MapType 接口。此外，ImageMapType 類供給了一些內置行為，以簡化圖像 MapType 的創立過程。

????在我們對用于實現 MapType 的類停止說明之前，請先懂得 Google 輿圖是如何肯定坐標和要表示的輿圖部分的。對于任何基本或疊加層 MapType，您需要實現相似的邏輯。

????

輿圖坐標

????Google Maps API 使用以下幾種坐標系：

????

緯度和經度值（對應地球上獨一的一個點）（Google 使用世界測地系統 WGS84 標準。）
世界坐標（對應輿圖上獨一的一個點）。
圖塊坐標（對應特定縮放級別輿圖上的特定圖塊）。

????

世界坐標

????每當 Maps API 需要將世界位置轉換為輿圖（屏幕）上的位置時，都需要先將緯度和經度值轉換為“世界”坐標。此轉換過程使用輿圖投影來完成。為此，Google Maps 使用墨卡托投影。您也可以定義自己的投影以實現 google.maps.Projection 接口。（請注意，V3 中的接口并非您“分類”的類，而是您自己定義的類的簡單規范。）

????為便于盤算像素坐標（如下所示），我們假設縮放級別為 0 的輿圖為具有基本圖塊大小的單個圖塊。然后，我們在縮放級別 0 定義像素坐標對應的世界坐標，使用投影將緯度和經度值轉換為此基本圖塊上的像素位置。該世界坐標為從輿圖投影原點到特定位置測量的浮點值。請注意，該值為浮點值，因此可能比表示的輿圖圖片確當前分辨率更精確。也就是說，世界坐標與當前縮放級別無關。

????Google 輿圖中的世界坐標是以墨卡托投影的原點（即輿圖西北角，經度為 180 度，緯度為約 85 度）為起點停止測量的，在 x 方向上朝東（向右）增大，在 y 方向上朝南（向下）增大。由于基本的墨卡托 Google 輿圖圖塊為 256x 256 像素，因此可用的世界坐標空間為 {0-256}, {0-256}（如下所示）。

????

????請注意，墨卡托投影在經度方向上的寬度有限，但在緯度方向上的高度無窮。我們利用約 +/- 85 度的墨卡托投影“剪切”基本輿圖圖像，使生成的輿圖為方形，從而更便于選擇圖塊。請注意，投影可能會在基本輿圖的可用坐標空間以外生成世界坐標（例如，如果您在離極點非常近的地方停止繪制）。

????

像素坐標

????世界坐標表示的是給定投影上的絕對位置，但我們需要將該坐標轉換為像素坐標，以肯定給定縮放級別的“像素”偏移量。像素坐標采用以下公式停止盤算：

pixelCoordinate = worldCoordinate * 2

????zoomLevel

????請注意，根據上述公式，各增大的縮放級別在 x 和 y 方向上均為原來的兩倍大。因此，縮放級別每增大一級，分辨率就為前一個級別的四倍。例如，在縮放級別 1，輿圖包括 4 個 256x256 像素圖塊，因此像素空間為 512x512。在縮放級別 19，輿圖上的每個 x 和 y 像素均可使用 0 到 256 * 219 之間的值停止引用。

????由于世界坐標是建立在輿圖的圖塊大小基本上的，因此像素坐標的整數部分起著標識當前縮放級別位置的確實像素的作用。請注意，對于縮放級別 0，像素坐標即是世界坐標。

????當初，我們在各個縮放級別的輿圖上都可精確表示全部位置。Maps API 會在輿圖中央結構給定縮放級別的視口（例如 LatLng）以及包括的 DOM 元素的大小，并將此邊框轉換為像素坐標。然后，API 從邏輯上肯定位于給定像素邊界內的全部輿圖圖塊。其中的每個輿圖圖塊均使用圖塊坐標引用，該坐標大大簡化了輿圖圖像的表示。

????

圖塊坐標

????Google Maps API 可能無法加載最有效的較高縮放級別的全部輿圖圖像；而是會將每個縮放級別的圖像都分割為一組輿圖圖塊，這些圖塊邏輯上按照應用能識別的次序排列。當輿圖滾動到新位置或新的縮放級別時，Maps API 會使用像素坐標肯定所需的圖塊，然后將這些值轉換為一組要檢索的圖塊。這些圖塊坐標采用邏輯上易于肯定哪些圖塊包括任何給定點的圖像的方案停止分配。

????Google 輿圖中的圖塊從與像素原點相同的位置停止編號。要實現 Google 墨卡托投影，原點圖塊應一直位于輿圖的西北角，且 x 值從西向東逐漸增大，而 y 值則從北向南逐漸增大。圖塊會使用相對于該原點的 x,y 坐標停止索引。例如，對于縮放級別 2，如果地球分割為了 16 個圖塊，那么每個圖塊都可通過獨一的 x,y 對停止引用：

????

????請注意，您可以通過按圖塊大小劃分像素坐標并采用結果的整數部分，來生成當前縮放級別的圖塊坐標（這屬于副產品）。

????以下示例表示了伊利諾州芝加哥在不同縮放級別下的坐標，其中包括 LatLng 值、世界坐標、像素坐標以及圖塊坐標：

每日一道理
水仙亭亭玉立，蘭花典雅幽香，牡丹雍容華貴，梨花潔白無暇……美麗的花朵總能得到世人的羨慕與贊嘆，殊不知，它從一粒小小的種子到最后開花，要歷經無數的艱辛與坎坷！我們的成長也是如此。只有做辛勤的“織夢者”，我們的夢想才會成真！

????查看示例 (map-coordinates.html)

????

MapType 接口

????自定義輿圖類型必須實現 MapType 接口。此接口用于指定某些屬性和方法，以允許 API 在肯定需要在當前視口和縮放級別中表示輿圖圖塊時可以發起對輿圖類型的請求。您可處理這些請求，以決定要加載的圖塊。

????請注意：您可以創立自己的類以實現此接口，也可以在具有兼容圖像的情況下，使用已實現此接口的 ImageMapType 類。

????實現 MapType 接口的類要求您定義并填充以下屬性：

????

tileSize（必填），用于指定圖塊（類型為 google.maps.Size）的大小。圖塊大小必須為矩形，但不必定要是正方形。
maxZoom（必填），用于指定要表示該輿圖類型圖塊的最大縮放級別。
minZoom（可選），用于指定要表示該輿圖類型圖塊的最小縮放級別。該值默許為 0，即表示不存在最小縮放級別。
name（可選），用于指定該輿圖類型的名稱。只有當您希望此輿圖類型可在 MapType 控件中選擇時，才需要填充該屬性。（請參閱上面的添加 MapType 控件。）
alt（可選），用于指定該輿圖類型的備用文本（以懸停文本的形式表示）。只有當您希望此輿圖類型可在 MapType 控件中選擇時，才需要填充該屬性。（請參閱上面的添加 MapType 控件。）

????此外，實現 MapType 接口的類還需要實現以下方法：

????

getTile()（必填）：對于給定視口，每當 API 肯定輿圖需要表示新的圖塊時，就調用此方法。getTile() 方法必須具有以下簽名：

getTile(tileCoord:Point,zoom:number,ownerDocument:Document):Node

API 會根據 MapType 的 tileSize、minZoom 和 maxZoom 屬性以及輿圖確當前視口和縮放級別來決定是否需要調用 getTile()。在給定已傳遞坐標、縮放級別和要在其上附加圖塊圖片的 DOM 元素的情況下，此方法的處理程序應返回 HTML 元素。
releaseTile()（可選）：每當 API 肯定輿圖需要刪除視圖范圍外的圖塊時，就調用此方法。該方法必須具有以下簽名：

releaseTile(tile:Node)

一般情況下，您應當刪除附加到輿圖圖塊而非輿圖中的任何元素。例如，如果您在輿圖圖塊疊加層中附加了事件監聽器，則應在此刪除這些監聽器。

????getTile() 方法可作為用于肯定要在給定視口內加載哪些圖塊的重要控制程序。

????

基本輿圖類型

????用此方法結構的輿圖類型可以獨自使用，也可以作為疊加層與其他輿圖類型結合使用。獨自使用的輿圖類型稱為“基本輿圖類型”。您可能希望 API 以看待 ROADMAP、TERRAIN 等其他任何現有基本輿圖類型的統一方法看待此類自定義 MapType。為此，您可將自己的自定義 MapType 添加到 Map 的 mapTypes 屬性中。此屬性的類型為 MapTypeRegistry。

????以下代碼創立了一個基本 MapType 以表示輿圖的圖塊坐標，并繪制了圖塊輪廓：

????
?

????

疊加層輿圖類型

????某些輿圖類型計劃為可在現有輿圖類型上使用。此類輿圖類型可能具有透明圖層，以指示興致點或向用戶表示其他數據。（Google 的路況圖層就屬于這種輿圖類型。）

????在這種情況下，您不會希望將輿圖類型視為獨自的實體。因此，您可以使用 Map 的 overlayMapTypes 屬性，直接將輿圖類型添加到現有 MapType。該屬性包括 MapType 的 MVCArray。全部輿圖類型（基本和疊加層）都呈當初 mapPane 圖層中。疊加層輿圖類型將按其在 Map.overlayMapTypes 數組中的出現次序，表當初所附加到的任何基本輿圖之上。

????以下示例與之前的示例相似，只是此示例在 ROADMAP 輿圖類型上創立了一個圖塊疊加層 MapType：

????
?

????

圖片輿圖類型

????實現 MapType 來作為基本輿圖類型可能既耗時又耗力。API 為大多數常見輿圖類型供給了可實現 MapType 接口的特別類：包括由單個圖片文件組成的圖塊的輿圖類型。

????這一 ImageMapType 類是使用 ImageMapTypeOptions 對象規范停止結構的，該規范定義了以下必填屬性：

????

tileSize（必填），用于指定圖塊（類型為 google.maps.Size）的大小。圖塊大小必須為矩形，但不必定要是正方形。
getTileUrl（必填），用于指定函數（平日作為內聯函數常量供給），以根據供給的世界坐標和縮放級別選擇適合的圖片圖塊。

????以下代碼使用 Google 的路況圖塊實現基本 ImageMapType。此示例使用正規化函數來確保圖塊沿著您輿圖的 x 軸（而不是 y 軸）重復。

????
?

????

投影

????地球是一個三維球體（近似說法），而輿圖是二維平面。您在 Google Maps API 內看到的輿圖與其他的地球平面輿圖一樣，都是地球在平面上的投影。簡單而言，投影可定義為緯度/經度值在投影輿圖的坐標上的映射。

????Google Maps API 中的投影必須實現 Projection 接口。Projection 實現必須同時供給坐標系之間的單向映射和雙向映射。也就是說，您必須定義地球坐標 (LatLng) 和 Projection 的世界坐標系之間的雙向轉換方法。Google 輿圖使用墨卡托投影來根據地理數據創立輿圖，并將輿圖上的事件轉換為地理坐標。您可以在 Map（或任何標準的基本 MapType）上調用 getProjection() 以獲得該投影。該標準 Projection 可滿足大部分使用需求，不過您也可以定義和使用自己的自定義投影。

????

實現投影

????在實現自定義投影時，您需要定義以下內容：

????

用于在經緯度坐標和笛卡爾平面之間停止雙向映射的公式。（Projection 接口僅支持轉換為直線坐標。）
基本圖塊大小。全部圖塊必須為矩形。
對于使用基本圖塊的輿圖，必須將其“世界大小”的縮放級別設置為 0。請注意：對于縮放級別為 0 且僅由一個圖塊形成的輿圖，其世界大小和基本圖塊大小是相同的。

????

投影中的坐標轉換

????每個投影都供給了兩種方法，以用于在這兩個坐標系之間停止轉換，您可以使用這些方法在地理坐標和世界坐標之間停止轉換：

????

Projection.fromLatLngToPoint() 方法可將 LatLng 值轉換為世界坐標。此方法用于在輿圖上放置疊加層（同時放置輿圖本身）。
Projection.fromPointToLatLng() 方法可將世界坐標轉換為 LatLng 值。此方法用于將輿圖上發生的事件（如點擊）轉換為地理坐標。

????Google 輿圖假設投影是直線的。

????一般來說，您可能會在以下兩種情況下使用投影：創立世界輿圖和創立當地區域輿圖。在前一種情況下，您應當確保投影在全部經度上都為直線且與經度垂直。某些投影（尤其是圓錐投影）可能為“局部垂直”（即指向北方），但該輿圖定位相對于某些參考經度較遠時，投影就可能會偏離正北（舉例而言）。您可以在局部區域使用此類投影，但請注意該投影肯定存在誤差，而且偏離參考經度越遠，轉換錯誤將會越明顯。

????

投影中的輿圖圖塊選擇

????投影不僅可用于肯定位置或疊加層的位置，還可用于定位輿圖圖塊本身。Maps API 使用 MapType 接口來呈現基本輿圖，該接口必須同時聲明用于識別輿圖投影的 projection 屬性和用于根據圖塊坐標值檢索輿圖圖塊的 getTile() 方法。圖塊坐標是您的基本圖塊大小（必須為矩形）和輿圖的“世界大小”（縮放級別為 0 時的輿圖世界的像素大小）為基本的。（對于縮放級別為 0 且僅由一個圖塊形成的輿圖，其圖塊大小和世界大小是相等的。）

????您可以在 MapType 的 tileSize 屬性內定義基本圖塊大小，并在投影的 fromLatLngToPoint() 和 fromPointToLatLng() 方法中明肯定義世界大小。

????由于所選擇的圖片取決于這些傳遞的值，因此在給定這些傳遞值的情況下，您可以對圖片停止定名（例如 map_zoom_tileX_tileY.png），以便通過編程方法停止選擇。

????以下示例定義了一個使用蓋爾-彼得斯投影的 ImageMapType：

// Note: this value is exact as the map projects a full // 360 degrees of longitude. var GALL_PETERS_RANGE_X = 800;// Note: this value is inexact as the map is cut off at ~ +/- 83 degrees. // However, the polar regions produce very little increase in Y range, so // we will use the tile size. var GALL_PETERS_RANGE_Y = 510;function degreesToRadians(deg) {return deg * (Math.PI / 180); }function radiansToDegrees(rad) {return rad / (Math.PI / 180); }function GallPetersProjection() {// Using the base map tile, denote the lat/lon of the equatorial origin.this.worldOrigin_ = new google.maps.Point(GALL_PETERS_RANGE_X * 400 / 800,GALL_PETERS_RANGE_Y / 2);// This projection has equidistant meridians, so each longitude// degree is a linear mapping.this.worldCoordinatePerLonDegree_ = GALL_PETERS_RANGE_X / 360;// This constant merely reflects that latitudes// vary from +90 to -90 degrees.this.worldCoordinateLatRange = GALL_PETERS_RANGE_Y / 2; };GallPetersProjection.prototype.fromLatLngToPoint = function(latLng) {var origin = this.worldOrigin_;var x = origin.x + this.worldCoordinatePerLonDegree_ * latLng.lng();// Note that latitude is measured from the world coordinate origin// at the top left of the map.var latRadians = degreesToRadians(latLng.lat());var y = origin.y - this.worldCoordinateLatRange * Math.sin(latRadians);return new google.maps.Point(x, y); };GallPetersProjection.prototype.fromPointToLatLng = function(point, noWrap) {var y = point.y;var x = point.x;if (y < 0) {y = 0;}if (y >= GALL_PETERS_RANGE_Y) {y = GALL_PETERS_RANGE_Y;}var origin = this.worldOrigin_;var lng = (x - origin.x) / this.worldCoordinatePerLonDegree_;var latRadians = Math.asin((origin.y - y) / this.worldCoordinateLatRange);var lat = radiansToDegrees(latRadians);return new google.maps.LatLng(lat, lng, noWrap); };function initialize() {var gallPetersMap;var gallPetersMapType = new google.maps.ImageMapType({getTileUrl: function(coord, zoom) {var numTiles = 1 << zoom;// Don't wrap tiles vertically.if (coord.y < 0 || coord.y >= numTiles) {return null;}// Wrap tiles horizontally.var x = ((coord.x % numTiles) + numTiles) % numTiles;// For simplicity, we use a tileset consisting of 1 tile at zoom level 0// and 4 tiles at zoom level 1.var baseURL = 'images/';baseURL += 'gall-peters_' + zoom + '_' + x + '_' + coord.y + '.png';return baseURL;},tileSize: new google.maps.Size(800, 512),minZoom: 0,maxZoom: 1,name: 'Gall-Peters'});gallPetersMapType.projection = new GallPetersProjection();var mapOptions = {zoom: 0,center: new google.maps.LatLng(0,0)};gallPetersMap = new google.maps.Map(document.getElementById("gallPetersMap"),mapOptions);gallPetersMap.mapTypes.set('gallPetersMap', gallPetersMapType);gallPetersMap.setMapTypeId('gallPetersMap');gallPetersMap.overlayMapTypes.insertAt(0, gallPetersMapType); }

????
詳細見：https://developers.google.com/maps/documentation/javascript/maptypes?hl=zh-cn

文章結束給大家分享下程序員的一些笑話語錄：關于編程語言
如果 C++是一把錘子的話，那么編程就會變成大手指頭。
如果你找了一百萬只猴子來敲打一百萬個鍵盤，那么會有一只猴子會敲出一段 Java 程序，而其余的只會敲出 Perl 程序。
一陣急促的敲門聲，“誰啊！”，過了 5 分鐘，門外傳來“Java”。
如果說 Java 很不錯是因為它可以運行在所有的操作系統上，那么就可以說肛交很不錯，因為其可以使用于所有的性別上。

轉載于:https://www.cnblogs.com/xinyuyuanm/archive/2013/05/14/3078606.html

總結

以上是生活随笔為你收集整理的类型缩放Google map 地图类型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： vue实战（9）：总结二
下一篇： FlasCC例子研究之Drawing补充