天天看點
傳回

Google Maps API 中文說明文檔

Google Maps API 說明

  • 導言
    • Google Maps的"Hello World"
    • 浏覽器相容性
    • XHTML和VML
    • API更新
    • 地理、行程和其他
  • 應用範例
    • 一個簡單例子
    • 地圖的移動和變換
    • 在地圖上添加控件
    • 事件監視
    • 顯示資訊浮窗
    • 地圖示注
    • 響應使用者點選
    • 在标記上顯示資訊浮窗
    • 建立圖示
    • 使用圖示類
    • 在地圖上使用XML和異步RPC ("AJAX")
  • API 概要
    • GMap類
    • 事件
    • 資訊浮窗
    • 标注
      • 圖示和标記
      • 折線
    • 控件
    • XML和RPC
  • 類參考
    • GMap
      • 構造函數
      • 方法
        • 配置
        • 控件處理
        • 狀态
        • 标注
        • 資訊浮窗
        • 事件
    • GMarker
      • 構造函數
      • 方法
    • GPolyline
      • 構造函數
    • GIcon
      • 構造函數
      • 屬性
    • Google Earthvent
      • 靜态方法
    • GXmlHttp
      • 靜态方法
    • GXml
      • 靜态方法
    • GXslt
      • 靜态方法
      • 方法
    • GPoint
      • 構造函數
      • 屬性
    • GSize
      • 構造函數
      • 屬性
    • GBounds
      • 構造函數
      • 屬性

本文來源于Google由Step1.cn翻譯并整理

導言

Google Maps的"Hello World"

看簡單的例子是開始學習API的最有效的方法，這個網頁在層上居中顯示了一個300x300的地圖:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">    <head>      <title>Google Maps JavaScript API Example - simple</title>      <script src="http://maps.google.com/maps?file=api&v=1&key=www.godeyes.cn" type="text/javascript"></script>    </head>    <body>      <div id="map" style="width: 300px; height: 300px"></div>      <script type="text/javascript">      //<![CDATA[        if (GBrowserIsCompatible()) {        var map = new GMap(document.Google EarthtElementById("map"));        map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);      }        //]]>      </script>    </body>    </html>        

你可以點這兒預覽這個例子的效果，不過在你上傳到自己的網站上運作之前，你必須把其中的"&key="之後的授權碼換成自己在Maps API key申請的授權碼，否則看不到效果.本網站使用的範例中的授權碼隻能在Step1.cn域名上使用。

你可以看到，Google Maps使用了一個JavaScript檔案(http://maps.google.com/maps?file=api&v=1) 這個檔案包含了你在自己的網頁上顯示Google地圖的所有的函數和類. 想要在自己的網頁上使用Google Maps API，你必須在網頁上通過script标簽連接配接一個包含你申請的授權碼的URL:

<script src="http://maps.google.com/maps?file=api&v=1&key=www.godeyes.cn" type="text/javascript"></script>        

Google Maps API提供的最重要的類是GMap,它代表頁面上的地圖對象， 你可以根據需要在頁面上使用多個GMap的執行個體 每個地圖被包含在一個HTML的容器(container)裡面，比如DIV标簽.

下面會講到如何給地圖執行個體添加和操作标注.

浏覽器相容性

Google Maps并不是對每一個浏覽器都相容的， Google Maps 現在相容Firefox/Mozilla, IE 5.5+, Safari 1.2+和Opera，不支援IE 5.0.因為每個不相容的浏覽器的動作又是不同的， 是以Maps API提供了一個全局的方法(GBrowserIsCompatible())來檢查浏覽器相容性， 但是并不自動檢查. 引入的腳本http://maps.google.com/maps?file=api&v=1可以在幾乎所有的浏覽器中被正常解析， 是以你可以放心的在檢查浏覽器相容性之前引入該腳本.

在本文的所有例子之中，除了上面的一篇之外，其他的既沒有用GBrowserIsCompatible()檢查浏覽器相容性，也沒有給出任何錯誤資訊 正式使用的程式上應該有更加友好的處理方法，這裡為了讓這些例子更加易懂，而忽略了浏覽器檢查.

XHTML和VML

建議你在需要使用地圖的網頁上使用标準的相容性好的XHTML,當頁面頂端存在DOCTYPE标簽時，浏覽器會使用"标準相容模式"來處理頁面， 這将使頁面能更好的跨越浏覽器執行.

同樣，如果你需要在地圖上包含折線，你需要為IE浏覽器在頁面上引入VML命名空間 這樣，你的文檔開頭就應該是這樣的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">    <head>      <style type="text/css">      v\:* {        behavior:url(#default#VML);      }      </style>      <script src="http://maps.google.com/maps?file=api&v=1&key=www.godeyes.cn" type="text/javascript"></script>    </head>        

關于VML，你可以在Microsoft's VML workshop查找更多資訊.

API更新

引入的JavaScript檔案URLhttp://maps.google.com/maps?file=api&v=1指向到 API 的"版本1"， 如果API出現了重要的更新，會增加這個版本号并且在Google Code和Maps API讨論組上面釋出公告.

Google會同時運作新版和舊版一個月左右，随後舊版就會被關閉.

地圖工作小組會在修複BUG或改善性能之後随時更新API，這些更新僅僅是為了改善性能和修複錯誤，不過在這個工程之中也可能發生影響API連接配接的情況 如果這樣的事情發生，你可以到Maps API discussion group報告你遇到的情況

地理、行程和其他

Google Maps API現在并不包含地理和 行程服務,可在網上有許多關于free Google Earthocoders的相關内容.

應用範例

一個簡單例子

建立一個在所在層中居中的地圖

var map = new GMap(document.Google EarthtElementById("map"));  map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);        

檢視範例(simple.html)

地圖的移動和變換

recenterOrPanToLatLng 方法進行一個地圖變換，目标點經/緯在目前視口之中時執行一個連續的動作，否則，執行不連續的變換動作

var map = new GMap(document.Google EarthtElementById("map"));  map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);  window.setTimeout(function() {    map.recenterOrPanToLatLng(new GPoint(-122.1569, 37.4569));  }, 2000);        

檢視範例(animate.html)

在地圖上添加控件

addControl方法可以在地圖上添加控件，并且內建了GSmallMapControl(用來縮放和移動圖檔)和GMapTypeControl(用來在地圖和衛星圖模式間切換)兩個控件.

var map = new GMap(document.Google EarthtElementById("map"));  map.addControl(new GSmallMapControl());  map.addControl(new GMapTypeControl());  map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);        

檢視範例(controls.html)

事件監視

Google Earthvent.addListener用來注冊事件螢幕，在這個例子中，在使用者移動或拖拽地圖後，輸出地圖中心點的經/緯.

var map = new GMap(document.Google EarthtElementById("map"));  Google Earthvent.addListener(map, "moveend", function() {    var center = map.Google EarthtCenterLatLng();    var latLngStr = '(' + center.y + ', ' + center.x + ')';    document.Google EarthtElementById("messaGoogle Earth").innerHTML = latLngStr;  });  map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);        

檢視範例(event.html)

顯示資訊浮窗

這個範例顯示一個指向地圖中心點的"Hello world"資訊浮窗，這裡資訊浮窗顯示在指向點的上面，而實際上，資訊窗能在地圖的任何地方顯示.

var map = new GMap(document.Google EarthtElementById("map"));  map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);  map.openInfoWindow(map.Google EarthtCenterLatLng(),                     document.createTextNode("Hello world"));        

檢視範例(infowindow.html)

地圖示注

本範例通過建立10個随機的标注和折線來說明地圖示注的用法.

// Center the map on Palo Alto  var map = new GMap(document.Google EarthtElementById("map"));  map.addControl(new GSmallMapControl());  map.addControl(new GMapTypeControl());  map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);    // Add 10 random markers in the map viewport using the default icon  var bounds = map.Google EarthtBoundsLatLng();  var width = bounds.maxX - bounds.minX;  var height = bounds.maxY - bounds.minY;  for (var i = 0; i < 10; i++) {    var point = new GPoint(bounds.minX + width * Math.random(),                          bounds.minY + height * Math.random());    var marker = new GMarker(point);    map.addOverlay(marker);  }    // Add a polyline with 4 random points. Sort the points by longitude so that  // the line does not intersect itself.  var points = [];  for (var i = 0; i < 5; i++) {    points.push(new GPoint(bounds.minX + width * Math.random(),                          bounds.minY + height * Math.random()));  }  points.sort(function(p1, p2) { return p1.x - p2.x; });  map.addOverlay(new GPolyline(points));        

檢視範例(overlay.html)

響應使用者點選

本範例在使用者點選地圖時，在相應的點建立一個标記，使用者點選标記時，移除這個标記.

var map = new GMap(document.Google EarthtElementById("map"));  map.addControl(new GSmallMapControl());  map.addControl(new GMapTypeControl());  map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);    Google Earthvent.addListener(map, 'click', function(overlay, point) {    if (overlay) {      map.removeOverlay(overlay);    } else if (point) {      map.addOverlay(new GMarker(point));    }  });        

檢視範例(click.html)

在标記上顯示資訊浮窗

在這個例子中，點選每一個标記，就會在标記上面顯示一個自定義的資訊浮窗.

// Center the map on Palo Alto  var map = new GMap(document.Google EarthtElementById("map"));  map.addControl(new GSmallMapControl());  map.addControl(new GMapTypeControl());  map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);    // Creates a marker whose info window displays the given number  function createMarker(point, number) {    var marker = new GMarker(point);      // Show this marker's index in the info window when it is clicked    var html = "Marker #<b>" + number + "</b>";    Google Earthvent.addListener(marker, "click", function() {      marker.openInfoWindowHtml(html);    });      return marker;  }    // Add 10 random markers in the map viewport  var bounds = map.Google EarthtBoundsLatLng();  var width = bounds.maxX - bounds.minX;  var height = bounds.maxY - bounds.minY;  for (var i = 0; i < 10; i++) {    var point = new GPoint(bounds.minX + width * Math.random(),                          bounds.minY + height * Math.random());    var marker = createMarker(point, i + 1);    map.addOverlay(marker);  }        

檢視範例(markerinfowindow.html)

建立圖示

建立一種新圖示,就像在Google Ride Finder上面使用的迷你标記一樣.必須給圖示指定前景圖檔、陰影圖檔、圖示在地圖上的點和資訊浮窗在圖示上的點.

// Create our "tiny" marker icon  var icon = new GIcon();  icon.imaGoogle Earth = "http://labs.google.com/ridefinder/imaGoogle Earths/mm_20_red.png";  icon.shadow = "http://labs.google.com/ridefinder/imaGoogle Earths/mm_20_shadow.png";  icon.iconSize = new GSize(12, 20);  icon.shadowSize = new GSize(22, 20);  icon.iconAnchor = new GPoint(6, 20);  icon.infoWindowAnchor = new GPoint(5, 1);    // Center the map on Palo Alto  var map = new GMap(document.Google EarthtElementById("map"));  map.addControl(new GSmallMapControl());  map.addControl(new GMapTypeControl());  map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);    // Creates one of our tiny markers at the given point  function createMarker(point) {    var marker = new GMarker(point, icon);    map.addOverlay(marker);    Google Earthvent.addListener(marker, "click", function() {      marker.openInfoWindowHtml("You clicked me!");    });  }    // Place the icons randomly in the map viewport  var bounds = map.Google EarthtBoundsLatLng();  var width = bounds.maxX - bounds.minX;  var height = bounds.maxY - bounds.minY;  for (var i = 0; i < 10; i++) {    createMarker(new GPoint(bounds.minX + width * Math.random(),                            bounds.minY + height * Math.random()));  }        

檢視範例(icon.html)

使用圖示類

多數情況下，使用的圖示可能前景圖檔不同，可是形狀和陰影是一樣的，達到這種效果最簡單的方法是使用GIcon類的copy方法來構造.這樣可以将一個Icon對象的所有屬性複制到一個新的Icon對象中.

// Create a base icon for all of our markers that specifies the shadow, icon  // dimensions, etc.  var baseIcon = new GIcon();  baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";  baseIcon.iconSize = new GSize(20, 34);  baseIcon.shadowSize = new GSize(37, 34);  baseIcon.iconAnchor = new GPoint(9, 34);  baseIcon.infoWindowAnchor = new GPoint(9, 2);  baseIcon.infoShadowAnchor = new GPoint(18, 25);    // Center the map on Palo Alto  var map = new GMap(document.Google EarthtElementById("map"));  map.addControl(new GSmallMapControl());  map.addControl(new GMapTypeControl());  map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);    // Creates a marker whose info window displays the letter corresponding to  // the given index  function createMarker(point, index) {    // Create a lettered icon for this point using our icon class from above    var letter = String.fromCharCode("A".charCodeAt(0) + index);    var icon = new GIcon(baseIcon);    icon.imaGoogle Earth = "http://www.google.com/mapfiles/marker" + letter + ".png";    var marker = new GMarker(point, icon);      // Show this marker's index in the info window when it is clicked    var html = "Marker <b>" + letter + "</b>";    Google Earthvent.addListener(marker, "click", function() {      marker.openInfoWindowHtml(html);    });      return marker;  }    // Add 10 random markers in the map viewport  var bounds = map.Google EarthtBoundsLatLng();  var width = bounds.maxX - bounds.minX;  var height = bounds.maxY - bounds.minY;  for (var i = 0; i < 10; i++) {    var point = new GPoint(bounds.minX + width * Math.random(),                           bounds.minY + height * Math.random());    var marker = createMarker(point, i);    map.addOverlay(marker);  }        

檢視範例(iconclass.html)

在地圖上使用XML和異步RPC ("AJAX")

在這個範例中，我們下載下傳一個靜态檔案("data.xml")，這個XML檔案中包含一系列經/緯坐标，當下載下傳完成後，讀取這個XML檔案并為每一個坐标在地圖上建立一個标記.

// Center the map on Palo Alto  var map = new GMap(document.Google EarthtElementById("map"));  map.addControl(new GSmallMapControl());  map.addControl(new GMapTypeControl());  map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);    // Download the data in data.xml and load it on the map. The format we  // expect is:  // <markers>  //   <marker lat="37.441" lng="-122.141"/>  //   <marker lat="37.322" lng="-121.213"/>  // </markers>  var request = GXmlHttp.create();  request.open("Google EarthT", "data.xml", true);  request.onreadystatechanGoogle Earth = function() {    if (request.readyState == 4) {      var xmlDoc = request.responseXML;      var markers = xmlDoc.documentElement.Google EarthtElementsByTagName("marker");      for (var i = 0; i < markers.length; i++) {        var point = new GPoint(parseFloat(markers[i].Google EarthtAttribute("lng")),                               parseFloat(markers[i].Google EarthtAttribute("lat")));        var marker = new GMarker(point);        map.addOverlay(marker);      }    }  }  request.send(null);        

檢視範例(async.html)

API 概要

GMap類

GMap的每一個執行個體表現為頁面上的一個地圖，可以建立這個類的多個執行個體 每個地圖被包含在一個container之中，比如一個DIV标簽，除非明确指定，地圖将使用相應container的大小.

GMap類提供了操作地圖點(中心和縮放度)和添加删除标記(比如GMarker和GPolyline執行個體)和方法. 同時也提供了一個打開"資訊浮窗"的方法，地圖上同時隻能有一個資訊浮窗.

更多資訊請參看GMap類參考

事件

利用事件螢幕，你可以在程式中加入動态的内容，每個執行個體提供一些指定的事件，你的程式可以利用靜态方法Google Earthvent.addListener或Google Earthvent.bind監視這些事件. 例如，以下代碼片斷在每次使用者點選地圖的時候顯示一個警告:

var map = new GMap(document.Google EarthtElementById("map"));  Google Earthvent.addListener(map, "click", function() {    alert("You clicked the map");  });        

Google Earthvent.addListener使用一個函數作為第三個參數，這個函數作為事件處理器，在事件被觸發時運作. 如果想綁定一個對象的方法到事件，可以使用Google Earthvent.bind.例如：

function MyApplication() {    this.counter = 0;    this.map = new GMap(document.Google EarthtElementById("map"));    Google Earthvent.bind(this.map, "click", this, this.onMapClick);  }    MyApplication.prototype.onMapClick() {    this.counter++;    alert("You have clicked the map " + this.counter +              this.counter == 1 ?" time.":" times.");  }    var application = new MyApplication();        

資訊浮窗

Map類有一個資訊浮窗，可以在地圖上以浮動視窗模式在地圖上顯示HTML内容.

基本的浮動視窗方法是openInfoWindow，這個方法以一個點和一個HTML節點作為參數，這個HTML節點被添加到資訊浮窗容器裡面，并顯示在相應點處.

openInfoWindowHtml差不多，但是它使用HTML字元串作為參數. openInfoWindowXslt則利用XML節點和XSLT文檔的URL位址來生成資訊浮窗内容，如果該XSLT文檔還沒有被下載下傳，則會自動異步下載下傳此檔案.

如果需要在标記上顯示資訊浮窗，你可以傳遞第三個參數(可選)給出視窗頂端和給定點位置的像素差. 比如你的标記高度是10px,你可以使用GSize(0,-10)作第三個參數.

GMarker類還提供了openInfoWindow方法用來處理像素值内容，是以不用擔心在程式中計算像素的問題.

标注

标注是一些綁定到地理坐标的對象，當移動、縮放地圖或切換模式(比如從地圖到衛星圖)時，标注也會跟着變化.

Maps API提供兩種标注:标記(地圖上的圖示)和折線(根據地理位置繪制的折線)

圖示和标記

The GMarker構造函數使用一個圖示和一個點作為參數，并提供一些類似"點選"的事件，看這個建立标記的例子

建立标記最困難的地方是指定圖示，複雜在于一個圖示需要幾個不同的圖檔構成.

每一個圖示至少都有一個前景圖檔和一個陰影圖檔，陰影必須是前景圖的45度視角的形狀，并且左下角和前景圖的左下角重疊，還必須是24-bit PNG灰階圖檔，才能剛好使圖示看起來像站在地圖上一樣.

The GIcon需要指定圖示使用的圖檔檔案的大小以便以合适的大小顯示這些圖檔，一下是指定一個圖示的最基本的代碼：

var icon = new GIcon();  icon.imaGoogle Earth = "http://www.google.com/mapfiles/marker.png";  icon.shadow = "http://www.google.com/mapfiles/shadow50.png";  icon.iconSize = new GSize(20, 34);  icon.shadowSize = new GSize(37, 34);        

The GIcon類提供有超過7個的屬性必須設定以保證圖示在浏覽器上的相容性和功能. 比如imaGoogle EarthMap屬性指定圖示不透明部分的形狀，如果你沒有設定這個屬性，在Firefox/Mozilla浏覽器上，整個圖示(包括透明部分)都能被點選. 看這個GIcon類參考了解更多資訊

折線

GPolyline構造函數使用一組地理點最為參數，你也能指定顔色、線寬和透明度 顔色采用老的HTML樣式，比如"#ff0000". GPolyline不支援直接使用顔色名字. 例如以下代碼會建立一個10像素寬的紅色線段：

var polyline = new GPolyline([new GPoint(-122.1419, 37.4419),                                new GPoint(-122.1519, 37.4519)],                                "#ff0000", 10);  map.addOverlay(polyline);        

在IE浏覽器中，我們用VML來繪制折線，而在其他的浏覽器之中，我們使用Google伺服器上的圖檔，并在地圖變化時重新重新整理圖檔.

控件

addControl用來添加控件，Maps API可以讓你在地圖上使用如下控件：

  • GLarGoogle EarthMapControl在Google Map中使用的大縮放/定位控件
  • GSmallMapControl在Google Map中使用的小縮放/定位控件
  • GSmallZoomControl一個小的縮放控件(不能定位)，用在小視窗中顯示駕駛方向
  • GMapTypeControl地圖類型切換控件(如：地圖和衛星圖)

例如，要在地圖上添加一個縮放/定位控件，你可以在地圖初始化時使用如下代碼：

map.addControl(new GLarGoogle EarthMapControl());        

這樣，控件就會被添加到地圖的左上角

XML和RPC

Google Maps API提供了一個建立XmlHttpRequest對象的方法，目前可以在IE, Firefox, and Safari上運作正常，如下：

var request = GXmlHttp.create();  request.open('Google EarthT', "myfile.txt", true);  request.onreadystatechanGoogle Earth = function() {    if (request.readyState == 4) {      alert(request.responseText);    }  }  request.send(null);        

你還可以使用靜态方法GXml.parse來解析一個XML文檔，使用XML字元串作為參數，這個方法對所有的浏覽器相容. 如果本地浏覽器不支援XML解析，則會采用一個基于JavaScript的解析器，可是不能保證這個解析器一定能正常的解析.

注意Google Maps API不需要使用XML或XmlHttpRequest因為這是一個純JavaScript/DHTML的API.

類參考

GMap

GMap代表頁面上的一個地圖對象. 浏覽更多資訊

構造函數

構造函數 說明
GMap(container, mapTypes?, width?, height?) 在目前的HTML容器内建立一個新的地圖，如果沒有指定，則使用預設的地圖類型([G_MAP_TYPE, G_SATELLITE_TYPE]) Creates a new map inside 同樣的，如果沒有嚴格指定大小，則會使用HTML容器的大小.

方法

Configuration
方法 說明
enableDragging() 啟用動态托拽 (預設已經啟用)
disableDragging() 禁止動态托拽
draggingEnabled() 如果動态托拽啟用，則傳回true
enableInfoWindow() 啟用資訊浮窗 (預設已經啟用)
disableInfoWindow() 禁止資訊浮窗 windows on this map
infoWindowEnabled() 如果資訊浮窗啟用，則傳回true
Controls
addControl(control) 将給定控件添加到地圖
removeControl(control) 從地圖上移除相應控件
State
方法 說明
Google EarthtCenterLatLng() 傳回地圖中心點經/緯坐标
Google EarthtBoundsLatLng() 傳回地圖視口邊界 bounds(經/緯坐标)
Google EarthtSpanLatLng() 傳回地圖視口寬度和高度(用精度和緯度作坐标)
Google EarthtZoomLevel() 傳回地圖的縮放級别
centerAtLatLng(latLng) 将地圖中心定位到指定GPoint
recenterOrPanToLatLng(latLng) 将地圖中心定位到指定GPoint，如果指定點在視口之中，則執行平滑過渡動作
zoomTo(zoomLevel) 縮放到指定的等級，如果指定的等級超出範圍，則請求會被忽略.
centerAndZoom(latLng, zoomLevel) 自動定位和縮放地圖
Google EarthtMapTypes() 傳回所有支援的地圖類型的數組(例如G_MAP_TYPE和G_SATELLITE_TYPE)
Google EarthtCurrentMapType() 傳回目前使用的地圖類型(例如G_MAP_TYPE或G_SATELLITE_TYPE)
setMapType(mapType) 切換到指定的地圖類型(例如G_MAP_TYPE或G_SATELLITE_TYPE)
Overlays
方法 說明
addOverlay(overlay) 将指定的标注 (例如GMarker或GPolyline) 添加到地圖
removeOverlay(overlay) 從地圖上移除指定的标注
clearOverlays() 删除所有地圖上的标注
Info Window
方法 說明
openInfoWindow(latLng, htmlElem, pixelOffset?, onOpenFn?, onCloseFn?) 在指定的地理坐标點顯示一個包含指定HTML内容的資訊浮窗. htmlElem應該是一個HTML DOM對象.如果指定了pixelOffset (GSize) 則使用給定的像素值調整視窗位置，這樣就可以實作在标記上顯示資訊浮窗， 如果指定了onOpenFn 則在視窗顯示後調用相應的函數，在視窗關閉時會調用onCloseFn函數.
openInfoWindowHtml(marker, htmlStr, pixelOffset?, onOpenFn?, onCloseFn?) 同于openInfoWindow，不過是用HTML字元串做參數，而不是HTML DOM對象.
openInfoWindowXslt(marker, xmlElem, xsltUri, pixelOffset?, onOpenFn?, onCloseFn?) 同于openInfoWindow, 不過使用XML元素和XSLT文檔的URI位址來生成資訊浮窗内容， 當一個URI位址第一次使用時，該文檔會被GXmlHttp下載下傳并被緩存.
showMapBlowup(point, zoomLevel?, mapType?, pixelOffset?, onOpenFn?, onCloseFn?)) 在目前地理位置點GPoint顯示一個放大，如果zoomLevel和mapType參數沒有被設定，預設使用第1縮放等級和目前正使用的地圖類型.
closeInfoWindow() 關閉資訊浮窗
Events
Event Arguments 說明
click overlay, point 當使用者點選一個地圖或标注的時候被觸發，如果在标注上點選，該标注會作為參數傳遞到事件處理器，否則會将地圖上被點選點的地理坐标作為參數.
move none 在地圖移動時觸發，在地圖被拖拽的時候會持續觸發.
movestart none 在地圖開始連續的移動時觸發，假如地圖的移動不是連續的，則不會被觸發.
moveend none 在連續或不連續的移動完成時被觸發，在連續的移動時，也隻是在最後被觸發一次.
zoom oldZoomLevel,newZoomLevel 在地圖縮放級别改變時被觸發
maptypechanGoogle Earthd none
infowindowopen none 在資訊浮窗顯示後被觸發
infowindowclose none 在資訊浮窗關閉後被觸發
addoverlay overlay 在一個标注被添加到地圖後被觸發
removeoverlay overlay 在一個标注從地圖上移除時觸發，注意：如果調用clearOverlays，則不會被觸發， 參看下面的clearoverlays事件
clearoverlays none 在所有的标記都從地圖上移除時觸發

GMarker

GMarker是一種地圖示注，在地圖上顯示一個圖示，類構造函數使用GIcon的一個執行個體和一個點作為參數， GMarker也包含一些比較友善的方法來在标注上顯示一個資訊浮窗.

構造函數

構造函數 說明
GMarker(point, icon?) 在指定的點，用指定的圖示顯示一個标記，如果沒有指定圖示，則使用預設的Google Map圖示.

方法

方法 說明
openInfoWindow(htmlElem) 利用給定的HTML内容在标注上顯示一個資訊浮窗，htmlElem應該是一個HTML DOM執行個體.
openInfoWindowHtml(htmlStr) 同于openInfoWindow，但是使用HTML字元串作參數，而不是HTML DOM執行個體.
openInfoWindowXslt(xmlElem, xsltUri) 同于openInfoWindow, 不過使用XML元素和XSLT文檔的URI位址來生成資訊浮窗内容， 當一個URI位址第一次使用時，該文檔會被GXmlHttp下載下傳并被緩存.
showMapBlowup(zoomLevel?, mapType?) 在标注上GPoint顯示一個放大，如果zoomLevel和mapType參數沒有被設定，預設使用第1縮放等級和目前正使用的地圖類型.

Events

Event Arguments 說明
click none 在使用者點選标記時被觸發
infowindowopen none 标記上的資訊浮窗打開後觸發
infowindowclose none 标記上的資訊浮窗關閉後觸發

GPolyline

GPolyline代表地圖上的折線圖，如果可能，折線用浏覽器支援的矢量繪圖工具繪制，否則調用Google伺服器上面的圖檔來顯示折線.

構造函數

構造函數 說明
GPolyline(points, color?, weight?, opacity?) 利用給定的地理坐标點數組建立一個GPolyline. color應該是一個16進制的顔色代碼(例如"#0000ff"),weight是一個代表線寬像素值得整數,opacity是一個0-1之間的小數.

GIcon

一個圖示指定用來顯示在地圖上的圖檔，因為浏覽器相容性的原因，指定一個圖示是比較複雜的 點這兒浏覽更多資訊

至少你應該為圖示指定imaGoogle Earth, shadowImaGoogle Earth, iconSize, shadowSize, 和iconAnchor屬性，才能顯示在地圖上，如果你要使用資訊浮窗，你必須同時指定infoWindowAnchor屬性.

構造函數

構造函數 說明
GIcon(copy?) 建立一個圖示，複制給定圖示的屬性

屬性

屬性 說明
imaGoogle Earth 前景圖檔位址
shadow 陰影圖檔位址
iconSize 前景圖檔大小像素值
shadowSize 陰影圖檔大小像素值
iconAnchor 圖示在地圖上的對應點相對于圖檔左上角的像素坐标值.
infoWindowAnchor 資訊浮窗在圖檔上的對應點相對于圖檔左上角的像素坐标值.
printImaGoogle Earth 用來列印的前景圖檔檔案URL位址，應該和imaGoogle Earth大小相同
mozPrintImaGoogle Earth 用來在Firefox/Mozilla浏覽器中列印的前景圖檔檔案URL位址，應該和imaGoogle Earth大小相同.
printShadow 用來列印的陰影圖檔檔案URL位址，因為大部分浏覽器不支援列印PNG圖檔，是以應該使用GIF圖檔.
transparent 圖示前景圖檔的透明版本用來捕獲IE的點選事件，這個圖檔應該是一個24-bit的PNG版本圖檔，使用1%的不透明度，形狀和大小都和圖示檔案相同.
imaGoogle EarthMap 在非IE的浏覽器中用來描述圖示檔案的可點選區域的一組x/y坐标數組.

Google Earthvent

所有的事件注冊和觸發都由Google Earthvent類來處理，Google Earthvent類的方法都是靜态方法， 例如，你應該使用Google Earthvent.bind(...)，而不是(new Event()).bind(...).

靜态方法

方法 說明
addListener(source, eventName, listenerFn) 當指定的事件觸發時，調用指定的listenerFn函數， addListener傳回一個變量，這個變量可以作為removeListener的參數.
removeListener(listener) 移除事件螢幕，參數應該是addListener的一個傳回值.
clearListeners(source, eventName) 為給定的事件移除所有的事件螢幕
trigGoogle Earthr(source, eventName, args...) 在指定的源上利用指定參數觸發事件
bind(source, eventName, object, method) 将給定的對象的給定方法綁定到給定的事件，當給定的時間被觸發時，指定的方法就會被調用 例如Google Earthvent.bind(map, "move",this, this.onMapMove)

GXmlHttp

The GXmlHttp提供一個方法用來建立跨浏覽器的XmlHttpRequest執行個體.

靜态方法

方法 說明
create() 構造一個新的XmlHttpRequest執行個體

GXml

The GXml類提供一個以XML格式來解析字元串的靜态方法，這個解析器可以在任何浏覽器上執行，假如浏覽器上沒有內建XML解析器，則會自動的使用一個基于Javascript的XML解析器，而這個Javascript的執行過程可能會比較慢.

靜态方法

方法 說明
parse(xmlStr) 以XML來解析指定的字元串，并傳回一個XML DOM.
value(xmlNode) 傳回一個節點的文本内容，用來解析文本節點.

GXslt

The GXslt類提供XML的XSLT轉化方法.本類可以在任何浏覽器上運作，假如浏覽器上沒有內建XSLT處理器，則會自動的使用一個基于Javascript的XSLT處理器. 而這個Javascript的執行過程可能會比較慢.

靜态方法

方法 說明
create(xsltXmlDoc) 利用給定的XML DOM對象，傳回一個GXslt執行個體，該XML DOM對象必須是一個XSLT檔案.

方法

方法 說明
transformToHtml(xmlDoc, htmlContainer) 轉換給定的XML文檔，并将HTML結果存入指定的HTML容器内.

GPoint

GPoint代表一個二維平面點，如果GPoint代表一個地理位置，則x是經度, y是緯度，用十進制.

構造函數

構造函數 說明
GPoint(x, y) 利用給定的坐标值建立新GPoint

屬性

屬性 說明
x 點的X(水準方向)坐标
y 點的Y(豎直方向)坐标

GSize

GSize代表一個二維的範圍大小值， 如果GSize是地理的範圍，那麼width代表經度，而y代表緯度.

構造函數

構造函數 說明
GSize(width, height) 利用給定的寬度和高度值建立新的GSize

屬性

屬性 說明
width 寬度
height 高度

GBounds

GBounds表示一個矩形範圍. 如果GBounds是地理坐标的，則X坐标代表經度，Y坐标代表緯度. 如果矩形範圍跨越國際時間線，那"最小坐标"代表矩形範圍左上角坐标，而不是兩個坐标的數學最小值.

構造函數

構造函數 說明
GBounds(minX, minY, maxX, maxY) 利用給定坐标建立新GBounds

屬性

屬性 說明
minX 左上角X坐标
minY 左上角Y坐标
maxX 右下角X坐标
maxY 右下角Y坐标

轉自： http://user.qzone.qq.com/172089801/blog/1280393602

java google api 浏覽器 xmlhttprequest html javascript
上一篇: java oracle spool,oracle之spool詳細使用總結
下一篇: Python進階之property屬性

繼續閱讀