Google 地圖 API V3 使用入門

時間 2019-11-30

標籤 google 地圖 api v3 使用入門欄目 Google 简体版

原文原文鏈接

Google官方教程：javascript

Google 地圖 API V3 使用入門css

Google 地圖 API V3 針對移動設備進行開發html

Google 地圖 API V3 之事件java

Google 地圖 API V3 之控件canvas

Google 地圖 API V3 之疊加層api

Google Maps API V3 之繪圖庫信息窗口瀏覽器

Google Maps API V3 之圖層安全

Google Maps API V3 之路線服務網絡

鑑於google被屏蔽，複製過來，供參考。

Hello, World

要開始瞭解 Google Maps API，最簡單的方法就是查看簡單的示例。如下網頁顯示了一張以澳大利亞新南威爾士的悉尼爲中心的地圖：app

<!DOCTYPE html>  
<html>  
  <head>  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <style type="text/css">  
      html { height: 100% }  
      body { height: 100%; margin: 0; padding: 0 }  
      #map_canvas { height: 100% }  
    </style>  
    <script type="text/javascript"  
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">  
    </script>  
    <script type="text/javascript">  
      function initialize() {  
        var mapOptions = {  
          center: new google.maps.LatLng(-34.397, 150.644),  
          zoom: 8,  
          mapTypeId: google.maps.MapTypeId.ROADMAP  
        };  
        var map = new google.maps.Map(document.getElementById("map_canvas"),  
            mapOptions);  
      }  
    </script>  
  </head>  
  <body onload="initialize()">  
    <div id="map_canvas" style="width:100%; height:100%"></div>  
  </body>  
</html>

儘管此示例較爲簡單，也請注意如下事項：

在此示例中，使用 <!DOCTYPE html> 聲明將應用聲明爲 HTML5。
使用 script 標記加入 Maps API JavaScript。
建立一個名爲「map_canvas」的 div 元素以存儲該地圖。
建立 Javascript 對象常量以存儲若干地圖屬性。
編寫 JavaScript 函數以建立「map」對象。
經過 body 標記的 onload 事件初始化該地圖對象。

下面對這些步驟進行了說明。

將您的應用聲明爲 HTML5

建議您在本身的網絡應用內聲明一個真實的 DOCTYPE。在本文的示例中，咱們使用簡單的 HTML5 DOCTYPE 將應用聲明爲 HTML5，以下所示：

<!DOCTYPE html>

當前的大多數瀏覽器會以「標準模式」呈現使用此 DOCTYPE 聲明的內容，這意味着您的應用應具備更強的跨瀏覽器適應能力。DOCTYPE 還設計爲可適度降級；沒法理解該聲明的瀏覽器會將其忽略，並使用「兼容模式」來顯示其內容。

請注意，某些在兼容模式下工做的 CSS 在標準模式中是無效的。具體地說，全部以百分比表示的大小必須繼承自父塊元素，而若是這些父元素中的某個父元素沒有指定大小，則系統會將其大小假定爲 0x0 像素。所以，咱們加入瞭如下 <style> 聲明：

<style type="text/css">  
  html { height: 100% }  
  body { height: 100%; margin: 0; padding: 0 }  
  #map_canvas { height: 100% }  
</style>

該 CSS 聲明用於表示地圖容器 <div>（名爲 map_canvas）應占據 HTML 主體的整個高度。請注意，咱們還必須明確聲明 <body> 和 <html> 所佔的百分比。

加載 Google Maps API

<html>  
  <head>  
    <script type="text/javascript"  
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">  
    </script>

script 標記中包含指向 JavaScript 文件所處位置的網址，該 JavaScript 文件可加載使用 Google Maps API 所需的全部符號和定義。script 爲必填標記。

key 參數包含您應用的 API 密鑰。請注意，此密鑰不適用於 v2 API，且必須經過 API 控制檯生成。V3版本不須要。

網址的 sensor 參數（必須添加）用於表示應用是否會使用 GPS 定位器等傳感器來肯定用戶的位置。在此示例中，咱們將該參數設爲變量「set_to_true_or_false」，用於強調您必須將該值明確設爲 true 或 false。

HTTPS

若是您的應用是 HTTPS 應用，那麼您可改成經過 HTTPS 加載 Google Maps JavaScript API：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"  
  type="text/javascript"></script>

在 SSL 應用中必須經過 HTTPS 加載 Maps API，以避免在大多數瀏覽器中顯示安全警告，而且建議您對請求中包含用戶所處位置等敏感用戶數據的應用也採用該作法。

庫

在經過 http://maps.googleapis.com/maps/api/js 網址加載 JavaScript Maps API 時，您也能夠選擇使用 libraries 參數加載其餘庫。庫是用於向主 JavaScript API 提供其餘功能的代碼模塊，不過只有在您專門請求時纔會加載。

異步加載 API

您可能但願在網頁徹底加載後或根據須要加載 Maps API JavaScript 代碼。爲此，您能夠插入本身的 <script> 標記做爲針對 window.onload 事件或函數調用的響應，不過您還須要指示 Maps JavaScript API 引導程序在 Maps JavaScript API 代碼徹底加載後再執行應用代碼。要實現此目的，您可使用 callback 參數，該參數爲函數要在 API 徹底加載後執行的變量。

如下代碼指示應用在網頁徹底加載後再加載 Maps API（使用 window.onload），並在該網頁中將 Maps JavaScript API 寫入 <script> 標記。此外，咱們還向 Maps API 引導程序傳遞了 callback=initialize，從而指示該 API 僅在自身徹底加載後執行 initialize() 函數：

function initialize() {  
  var mapOptions = {  
    zoom: 8,  
    center: new google.maps.LatLng(-34.397, 150.644),  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  }  
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  
}  
  
function loadScript() {  
  var script = document.createElement("script");  
  script.type = "text/javascript";  
  script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";  
  document.body.appendChild(script);  
}  
  
window.onload = loadScript;

地圖 DOM 元素

對於要在網頁上顯示的地圖，咱們須要爲其留出一個位置。一般，咱們會建立一個名爲 div 的元素，而後在瀏覽器的文檔對象模型 (DOM) 中獲取對此元素的引用。

在以上示例中，咱們定義了一個名爲「map_canvas」的 <div>，並使用樣式屬性爲其設置大小。請注意，這一大小已設置爲「100％」，這將會展開地圖，使之符合移動設備的屏幕大小。您可能須要根據瀏覽器的屏幕大小和填充區域調整這些值。請注意，地圖將始終根據其中所包含的元素的大小決定其自己大小，所以，您必須始終爲 <div> 明確設置一個適用的大小。

地圖選項

var mapOptions = {  
  center: new google.maps.LatLng(-34.397, 150.644),  
  zoom: 8,  
  mapTypeId: google.maps.MapTypeId.ROADMAP  
};

要初始化地圖，咱們須要先建立一個 Map options 對象來包含地圖初始化變量。該對象不是構建出來的，而是以對象常量的形式建立獲得的。

var mapOptions = {};

緯度和經度

因爲咱們要經過 center 將地圖中心設爲特定的點，所以會建立 LatLng 對象，同時按 {緯度,經度} 的順序傳遞位置的座標，以存儲該位置：

center = new google.maps.LatLng(-34.397, 150.644)

將地址轉換爲地理地點的過程稱爲「地理編碼」。此版本的 Google Maps API 支持地理編碼。有關詳情，請參閱此指南的服務章節中的地理編碼。

縮放級別

地圖顯示時的初始分辨率能夠經過 zoom 屬性進行設置，其中縮放 0 至關於地球地圖可縮小的最低級別，而且縮放級別越高，地圖放大的分辨率就越高。

zoom: 8

若是要將包含完整地球的地圖做爲單張圖片提供，要麼須要極大的地圖，要麼須要分辨率較低的小型地圖。所以，Google 地圖和 Maps API 內的地圖圖片會被分割爲地圖「圖塊」和「縮放級別」兩部分。在低縮放級別下，一小組地圖圖塊就能夠覆蓋廣闊的區域；而在高縮放級別下，圖塊的分辨率較高，覆蓋的區域則較小。

地圖類型

此時，您還必須明確設置一個初始地圖類型。

mapTypeId: google.maps.MapTypeId.ROADMAP

系統支持如下地圖類型：

ROADMAP，用於顯示 Google 地圖的默認、普通 2D 圖塊。
SATELLITE，用於顯示拍攝的圖塊。
HYBRID，用於同時顯示拍攝的圖塊和重要地圖項（道路、城市名）的圖塊圖層。
TERRAIN，用於顯示天然地形圖塊，其中包含海拔和水體地圖項（山脈、河流等）。

地圖對象

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

用於表明地圖的 JavaScript 類屬於 Map 類。此類的對象定義了網頁上的單個地圖。（您能夠建立多個此類的實例，每一個對象都將在網頁上定義一個單獨的地圖。）咱們使用 Javascript new 運算符建立了一個此類的新實例。

建立新的地圖實例時，您須要在網頁中指定一個 <div> HTML 元素做爲地圖的容器。HTML 節點是 Javascript document 對象的子對象，咱們經過document.getElementById() 方法獲取了對該元素的引用。

此代碼用於定義一個變量（名爲 map），而後將其分配至新的 Map 對象，同時傳遞到 mapOptions 對象常量所定義的選項中。這些選項將用於初始化地圖的屬性。Map() 函數稱爲「構造函數」，其定義以下：

構造函數	說明
`Map(mapDiv:Node, opts?:MapOptions)`	使用傳遞的任何（可選）參數在給定的 HTML 容器（一般爲 DIV 元素）中建立新的地圖。

加載地圖

呈現 HTML 網頁時，系統會擴展文檔對象模型 (DOM)，接收全部外部圖片和腳本並將其合併到 document 對象中。爲確保系統在網頁徹底加載後纔將咱們的地圖放到網頁上，咱們只會在 HTML 網頁的 <body> 元素收到 onload 事件後，纔開始執行用於構建 Map 對象的函數。這樣作能夠避免出現意外行爲，並讓咱們更好地控制地圖的繪製方式和時間。

body 標記的 onload 屬性爲一個事件處理程序示例。Google Maps JavaScript API 還提供了一組事件，供您處理以肯定狀態變化。

Last updated 二月 1, 2013.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。