Google Map Api文檔,免費Google地圖API使用說明

Google Maps API可以讓你在自己的網頁之中嵌入免費的Google電子地圖. 在此之前,你只需要 申請一個API授權碼,而這是免費的.

因為Google Maps API是還在測試之中的程序,可能有些Bug,并且功能上也有一些欠缺. 你可以到Google Maps API討論組給出你的意見.

特別提示:如果您的英文還馬虎,建議您直接看google官方最新的Google Maps API Documentation : The Google Maps API lets developers embed Google Maps in their own web pages with JavaScript. You can add overlays to the map (including markers and polylines) and display shadowed "info windows" just like Google Maps.

Google Maps API 中文使用說明文檔

本文來源于GoogleStep1.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=abcdefg" 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.getElementById("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=abcdefg" 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=abcdefg" 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 CodeMaps API討論組上面發布公告.

Google會同時運行新版和舊版一個月左右,隨后舊版就會被關閉.

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

地理、行程和其他

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

應用范例

一個簡單例子

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

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
查看范例(simple.html)

地圖的移動和變換

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

var map = new GMap(document.getElementById("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.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
查看范例(controls.html)

事件監視

GEvent.addListener用來注冊事件監視器,在這個例子中,在用戶移動或拖拽地圖后,輸出地圖中心點的經/緯.

var map = new GMap(document.getElementById("map"));
GEvent.addListener(map, "moveend", function() {
  var center = map.getCenterLatLng();
  var latLngStr = '(' + center.y + ', ' + center.x + ')';
  document.getElementById("message").innerHTML = latLngStr;
});
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
查看范例(event.html)

顯示信息浮窗

這個范例顯示一個指向地圖中心點的"Hello world"信息浮窗,這里信息浮窗顯示在指向點的上面,而實際上,信息窗能在地圖的任何地方顯示.

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
map.openInfoWindow(map.getCenterLatLng(),
                   document.createTextNode("Hello world"));
查看范例(infowindow.html)

地圖標注

本范例通過創建10個隨機的標注和折線來說明地圖標注的用法.

// Center the map on Palo Alto
var map = new GMap(document.getElementById("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.getBoundsLatLng();
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.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

GEvent.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.getElementById("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>";
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });

  return marker;
}

// Add 10 random markers in the map viewport
var bounds = map.getBoundsLatLng();
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.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/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.getElementById("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);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("You clicked me!");
  });
}

// Place the icons randomly in the map viewport
var bounds = map.getBoundsLatLng();
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.getElementById("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.image = "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>";
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });

  return marker;
}

// Add 10 random markers in the map viewport
var bounds = map.getBoundsLatLng();
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.getElementById("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("GET", "data.xml", true);
request.onreadystatechange = function() {
  if (request.readyState == 4) {
    var xmlDoc = request.responseXML;
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var point = new GPoint(parseFloat(markers[i].getAttribute("lng")),
                             parseFloat(markers[i].getAttribute("lat")));
      var marker = new GMarker(point);
      map.addOverlay(marker);
    }
  }
}
request.send(null);
查看范例(async.html)

API 概要

GMap

GMap的每一個實例表現為頁面上的一個地圖,可以創建這個類的多個實例 每個地圖被包含在一個container之中,比如一個DIV標簽,除非明確指定,地圖將使用相應container的大小.

GMap類提供了操作地圖點(中心和縮放度)和添加刪除標記(比如GMarkerGPolyline實例)和方法. 同時也提供了一個打開"信息浮窗"的方法,地圖上同時只能有一個信息浮窗.

更多信息請參看GMap類參考

事件

利用事件監視器,你可以在程序中加入動態的內容,每個實例提供一些指定的事件,你的程序可以利用靜態方法GEvent.addListenerGEvent.bind監視這些事件. 例如,以下代碼片斷在每次用戶點擊地圖的時候顯示一個警告:

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

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

function MyApplication() {
  this.counter = 0;
  this.map = new GMap(document.getElementById("map"));
  GEvent.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.image = "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個的屬性必須設置以保證圖標在瀏覽器上的兼容性和功能. 比如imageMap屬性指定圖標不透明部分的形狀,如果你沒有設置這個屬性,在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可以讓你在地圖上使用如下控件:

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

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

map.addControl(new GLargeMapControl());

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

XML和RPC

Google Maps API提供了一個創建XmlHttpRequest對象的方法,當前可以在IE, Firefox, and Safari上運行正常,如下:

var request = GXmlHttp.create();
request.open('GET', "myfile.txt", true);
request.onreadystatechange = 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

方法 說明
getCenterLatLng() 返回地圖中心點經/緯坐標
getBoundsLatLng() 返回地圖視口邊界 bounds(經/緯坐標)
getSpanLatLng() 返回地圖視口寬度和高度(用精度和緯度作坐標)
getZoomLevel() 返回地圖的縮放級別
centerAtLatLng(latLng) 將地圖中心定位到指定GPoint
recenterOrPanToLatLng(latLng) 將地圖中心定位到指定GPoint,如果指定點在視口之中,則執行平滑過渡動作
zoomTo(zoomLevel) 縮放到指定的等級,如果指定的等級超出范圍,則請求會被忽略.
centerAndZoom(latLng, zoomLevel) 自動定位和縮放地圖
getMapTypes() 返回所有支持的地圖類型的數組(例如G_MAP_TYPEG_SATELLITE_TYPE)
getCurrentMapType() 返回當前使用的地圖類型(例如G_MAP_TYPEG_SATELLITE_TYPE)
setMapType(mapType) 切換到指定的地圖類型(例如G_MAP_TYPEG_SATELLITE_TYPE)

Overlays

方法 說明
addOverlay(overlay) 將指定的標注 (例如GMarkerGPolyline) 添加到地圖
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顯示一個放大,如果zoomLevelmapType參數沒有被設置,默認使用第1縮放等級和當前正使用的地圖類型.
closeInfoWindow() 關閉信息浮窗

Events

Event Arguments 說明
click overlay, point 當用戶點擊一個地圖或標注的時候被觸發,如果在標注上點擊,該標注會作為參數傳遞到事件處理器,否則會將地圖上被點擊點的地理坐標作為參數.
move none 在地圖移動時觸發,在地圖被拖拽的時候會持續觸發.
movestart none 在地圖開始連續的移動時觸發,假如地圖的移動不是連續的,則不會被觸發.
moveend none 在連續或不連續的移動完成時被觸發,在連續的移動時,也只是在最后被觸發一次.
zoom oldZoomLevel, newZoomLevel 在地圖縮放級別改變時被觸發
maptypechanged 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顯示一個放大,如果zoomLevelmapType參數沒有被設置,默認使用第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

一個圖標指定用來顯示在地圖上的圖片,因為瀏覽器兼容性的原因,指定一個圖標是比較復雜的 點這兒瀏覽更多信息

至少你應該為圖標指定image, shadowImage, iconSize, shadowSize, 和iconAnchor屬性,才能顯示在地圖上,如果你要使用信息浮窗,你必須同時指定infoWindowAnchor屬性.

構造函數

構造函數 說明
GIcon(copy?) 創建一個圖標,復制給定圖標的屬性

屬性

屬性 說明
image 前景圖片地址
shadow 陰影圖片地址
iconSize 前景圖片大小像素值
shadowSize 陰影圖片大小像素值
iconAnchor 圖標在地圖上的對應點相對于圖片左上角的像素坐標值.
infoWindowAnchor 信息浮窗在圖片上的對應點相對于圖片左上角的像素坐標值.
printImage 用來打印的前景圖片文件URL地址,應該和image大小相同
mozPrintImage 用來在Firefox/Mozilla瀏覽器中打印的前景圖片文件URL地址,應該和image大小相同.
printShadow 用來打印的陰影圖片文件URL地址,因為大部分瀏覽器不支持打印PNG圖片,所以應該使用GIF圖片.
transparent 圖標前景圖片的透明版本用來捕獲IE的點擊事件,這個圖片應該是一個24-bit的PNG版本圖片,使用1%的不透明度,形狀和大小都和圖標文件相同.
imageMap 在非IE的瀏覽器中用來描述圖標文件的可點擊區域的一組x/y坐標數組.

GEvent

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

靜態方法

方法 說明
addListener(source, eventName, listenerFn) 當指定的事件觸發時,調用指定的listenerFn函數, addListener返回一個變量,這個變量可以作為removeListener的參數.
removeListener(listener) 移除事件監視器,參數應該是addListener的一個返回值.
clearListeners(source, eventName) 為給定的事件移除所有的事件監視器
trigger(source, eventName, args...) 在指定的源上利用指定參數觸發事件
bind(source, eventName, object, method) 將給定的對象的給定方法綁定到給定的事件,當給定的時間被觸發時,指定的方法就會被調用 例如GEvent.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坐標
尖子和八1手电子游戏