google maps api document 漢字移譯

google maps api document 漢字移譯google maps api document 漢字移譯- –
Tag： API,MAPS,GOOGLE
Google Maps API
可以讓你在你自個兒的網頁上鑲嵌google地圖。要運用這個API,你需求上這處去
/apis/maps/signup.htm
提出請求一個API key並依照下邊的解釋明白來做。

這個API是新的，所以以完美的文檔的要求來說，它有可能會有一點小不正確。寬容忍耐我們，我們將填補這些個破綻，您可以加入這個
Google Maps API 漢字商議區
http://groups.google.com/group/Goolgle-Map-Chinese
地圖商議組來反饋您的問題並商議這個API。
正文如下所述：
紹介：
Google Maps的helloword手續
瀏覽器的挑選
XHTML和VML
API更新
地理編碼，途徑挑選等
例子：
最基本的
地圖移動和動畫
向地圖中添加控件
事情監聽
敞開一個屬性窗戶
地圖疊置
裸機操作
在標記上的窗戶顯露信息
開創圖標
運用圖標類
在地圖上運用XML和異步傳道輸送RPC（AJAX）
API 總覽
GMap 類（the GMap class）
事情（Event）
信息窗戶（the info window）
疊置（Overlays）
圖標和標記（Icons and 馬克ers）
折線（Polylines）
控件（Controls）
XML 和 RPC
類參照
GMap
* Constructor
* Methods
*Configuration
*Controls
*State
*Overlays
*Info Window
*Event

G馬克er
* Constructor
* Methods
* Events
GPloyLine
* Constructor

GIcon
* Constructor
* Properties

GEvent
* Static Methods

GXmlHttp
* Static Methods

GXml
* Static Methods
GXslt
* Static Methods
* Methods

GPoint
* Constructor
* Properties

GSize
* Constructor
* Propertes
GBounds
* Constructor
* Properties
簡介：
Google Maps 的hello world實際的例子

最簡單的著手學習這個API的辦法是看一個簡單的例子。。這個網頁顯露了以Palo

Alto為核心的一個300×300的地圖
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
/maps?file=apiv=1key=abcdefgtype=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
你可以把這個例子下載下來並編輯和測試它，不過你需求將abcdefg調換成你自個兒的Maps

API key，讓這個例子能在你自個兒的網站上運行。
正如你在上頭的例子中所看見的，Google
Maps引入了一個簡單的javascript
url（http://maps.google.com/maps?file=apiv=1）,這個url裡面含有了全部的在你的網頁上開創地圖的所需求的標記和符號。要運用Google

Maps
Api，你需求去開創一個簡單的script標記來指向這個url，當然要加上你從google那邊提出請求來的這個API的key。

script
src=http://maps.google.com/maps?file=apiv=1key=abcdefgtype=text/javascript/script

Google Maps
API輸出的最主要的類是GMap類，它表達了一個網頁上的簡單的地圖。你可以開創更多的這個類的實際的例子（每個實際的例子來表網頁上的一個地圖）。地圖被鑲嵌到一個器皿shy;-中，普通是一個div元素。

駕駛和疊置圖層到地圖實際的例子的辦法會在下邊周密紹介。

瀏覽器兼容性
Google Maps並錯誤全部的瀏覽器兼容。如今Google
Maps支持的瀏覽器版本有Firefox/Mozilla,IE5.5以上版本，Safari1.2以上版本局部支持Opera。它不支持IE5.0。因為不shy;-同的應用要求用戶對不一樣的瀏覽器作不一樣的操作，Maps

API供給了一個globle
辦法（GBrowserIsCompatible（））來查緝兼容性，不過它沒有不論什麼半自動的針對不一樣瀏覽器的行徑。

腳本代碼http://maps.google.com/maps?file=apiv=1將在幾乎全部的瀏覽器上被准確解析，所以你可以在查緝兼容性之前安全地將這個腳本代碼引入進來。

除開上頭的例子檢驗測定了兼容性外，本文檔中的全部例子都沒有檢驗測定兼容性，對於老的瀏覽器，它們也不會提醒不論什麼信息。顯然，真正的應用中應當將事物做得更好，不過我shy;-們疏忽了這些個查緝來讓我們的例子更容易讀。

XHTML 和 VML
我們引薦您再裡面含有地圖的網頁上運用合格的XHTML。當瀏覽器檢驗測定到在頁首的DOCTYPE標簽時，他們將運用合格的標准樣式來執行你的網頁，這麼可以要得shy;-在不一樣的瀏覽器上的布局和行徑更加的可預料一點。

一樣的，假如你在你的地圖上要裡面含有PLOYLINE，對於IE瀏覽器你需求在你的XHTML文檔中引入VML名字空間。你的HTML文檔應當這麼著手：

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
/maps?file=apiv=1key=abcdefgtype=text/javascript/script

/head
檢查Microsoft VML workshop可以獲得更多信息。
API 的更新
URl
http://maps.google.com/maps?file=apiv=1代表API的’1.0’版本。當我們要對這個API作出重大更新的時刻，我們將增加版本號並在GOOGLE

CODE和MAP API商議組刊發通知。
我們將試驗同一時的運氣行新版本和舊版本，一個月後，老的版本便會被停用。

Maps團隊將透明地更新API，涵蓋加強它地性能，修復它的bugs。這些個bugs修恢復工作作只是為了增長性能和填補破綻，不過我們有可能會不注意地毀傷一點APshy;-I客戶，請在Maps

API商議組中報告陳述這些個事情狀況。
地理編碼，途徑，等等
Google Maps
API還沒有裡面含有地理編碼和路由服務，但羅網上有眾多的不收費的地理編碼。

舉出例子：
the basics
開創一副地圖並將那裡面心定位在Palo Alto；
var map = new GMap(document.getElementById(map));
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
map movement and animation

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);
Adding Controls to the Map

你可以運用addControl辦法往地圖上添加控件。在這個例子中，我們添加了GSmallMapControl和GMapTypeControl，折要得我shy;-們能夠縮放，隨意游玩地圖並在地圖和衛星影像之間做切換。

事情監聽器在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);
敞開一個消息兒窗戶(opening an info window)
顯露一個指向地圖半中腰的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));
地圖疊加(Map Overlays)
開創了十個隨機的標記和一個隨機的折線來展覽map
overlays的用場
// 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 馬克ers 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 馬克er = new G馬克er(point);
map.addOverlay(馬克er);

}

// 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));
裸機操作(Click Handling).

當你點擊地圖的時刻，你往那一個點上頭添加了一個標記。當你再次點擊這個點的時刻，你將這個點從地圖上抹掉了。

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 G馬克er(point));
}

});

在標記上顯露消息兒窗戶(Display Info windows Above 馬克ers)
在這個舉出例子中，我們經過監聽對每個標記的裸機事情來顯露一個定義的消息兒窗戶，我們運用了關閉窗戶的功能來對每個窗戶的內部實質意義施行用戶化的定制。

// 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 馬克er whose info window displays the given number
function create馬克er(point, number) {
var 馬克er = new G馬克er(point);
// Show this 馬克er’s index in the info window when it is clicked
var html = 馬克er #b + number + /b;
GEvent.addListener(馬克er, click, function() {
馬克er.openInfoWindowHtml(html);
});
return 馬克er;

}

// Add 10 random 馬克ers 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 馬克er = create馬克er(point, i + 1);
map.addOverlay(馬克er);

}

開創圖標
開創一個新類型的圖標，運用在Google Ride
Finder中的mimi標記作為例子。我們需求制定
這個圖像的前面的景物圖像，暗影圖像,以及我們想要將這些個圖標放在地圖上的位置和和這些個圖標相對應的

信息窗戶。
// Create our tiny 馬克er 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 馬克ers at the given point
function create馬克er(point) {
var 馬克er = new G馬克er(point, icon);
map.addOverlay(馬克er);
GEvent.addListener(馬克er, click, function() {
馬克er.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++) {
create馬克er(new GPoint(bounds.minX + width * Math.random(),
bounds.minY + height * Math.random()));

}

運用圖標類(Using Icon Classes)

在眾多種事情狀況下，你的圖標或許會有相同的前面的景物色，但有可能有不一樣的式樣和暗影。最簡單的達到

這種效果的辦法是運用GIcon
類的復印，這些個復印將你所要定義的圖標屬性都復印到一個你所定義的

新的圖標上去。
// Create a base icon for all of our 馬克ers that specifies the shadow,

icon
// dimensions, etc.
var baseIcon = new GIcon();
baseIcon.shadow = /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 馬克er whose info window displays the letter corresponding

to
// the given index
function create馬克er(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 = /mapfiles/馬克er + letter +
.png;
var 馬克er = new G馬克er(point, icon);
// Show this 馬克er’s index in the info window when it is clicked
var html = 馬克er b + letter + /b;
GEvent.addListener(馬克er, click, function() {
馬克er.openInfoWindowHtml(html);
});
return 馬克er;

}

在地圖上運用XML和異步長程辦法調配使用Using XML and
Asynchronous RPC(‘AJAX’)
在這個例子中，我們下載了一個靜態文件data.xml，這個文件裡面含有有一系列以XML儲存的經緯度坐標。當下載完成後，我們解析這個XML文件並在每個經shy;-緯度交匯處，開創一個圖標。

// 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:
// 馬克ers
//馬克er lat=37.441 lng=-122.141/
//馬克er lat=37.322 lng=-121.213/
// /馬克ers
var request = GXmlHttp.create();
request.open(GET, data.xml, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
var 馬克ers =
xmlDoc.documentElement.getElementsByTagName(馬克er);
for (var i = 0; i 馬克ers.length; i++) {
var point = new
GPoint(parseFloat(馬克ers[i].getAttribute(lng)),

parseFloat(馬克ers[i].getAttribute(lat)));
var 馬克er = new G馬克er(point);
map.addOverlay(馬克er);
}
}

}

request.send(門裡出身);

API 總覽
GMap 類
GMap類的一個實際的例子代表網頁上的一個簡單的地圖。你可以為這個實際的例子開創眾多實際的例子（這個網頁上有若乾地圖，你就可以開創若乾個）。一個地圖被裡面含有再一個器皿中，shy;-普通來說是一個DIV元素。假如你沒有明確地指出地圖的尺寸，地圖將會運用器皿的體積來表決其體積。

GMap類供給一點辦法來扼制地圖的空間位置（指定核心和縮放程度）和在地圖上添加和移除疊加圖層(overlays).它還供給了敞開一個消息兒窗戶的辦法shy;-，這個消息兒窗戶就是你再Google

Maps和Google
Local中所看見的。一個地圖只有一個簡單的消息兒窗戶，所以在一個指定時間你只能看見一個窗戶。

Event

你可以運用Event監聽器往你的應用中動態地添加元素。一個對象供給了眾多被起名稱的事情(Event),你的應用可以運用靜態辦法GEvent.addLisshy;-tener還是GEvent.bind監聽這些個事情。例如，下邊的代碼片段就在用戶點擊地圖窗戶時顯露一個警告信息。

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

});

GEvent.addListener辦法作為一個第三參變量的函數存在，這個辦法的運用需求援用一個事情處置函數在裡邊。假如你像要對一個辦法類綁定一個事情，shy;-你可以運用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();

消息兒窗戶(the info window).
Map
類有一個簡單的消息兒窗戶，可以在地圖上方的浮動窗戶內顯露HTML內部實質意義。

最基本的消息兒窗戶辦法時openInfoWindow，這個辦法運用一個點和一個HTML中的Dom元素作為參變量。HTML

DOM元素被添加在消息兒窗戶器皿在這以後，消息兒窗戶會顯露在這個點上方。

openInfoWindowHtml也很相仿，不過它以一個HTML字符串作為一個參變量而不是一個DOM元素。

openInfoWindowsXslt以一個XML
DOM元素以及XSLT文檔的URL來萌生窗戶內部實質意義，假如用戶的瀏覽器沒有下載下來的話，將異步地下載XSLT。

要在一個疊置圖層（例如一個標記）上顯露消息兒窗戶，你可以經過一個可選的第三參變量指定消息兒窗戶

位置和你所指定的點之間的偏移量。例如，假如你的標記有10個象素高，你可以設置該象素便宜為GSize(0,-10).

G馬克er類供給openInfoWindow辦法來為你處置圖標的體積和式樣萌生的象素偏移，所以你普通不必為計算你應用中的圖標偏移而擔心。

疊置圖層(Overlays)
疊置圖層（仿佛好象應當移譯為疊加物更為就緒）時在地圖上的和經緯度坐標綁定的對象，所以他們會隨

著你拖動/縮放還是變換地圖投影的時刻(例如變換地圖標准樣式到衛星標准樣式的時刻)。

Maps
API供給了兩品類型的疊加物，一種是標記，它們是地圖上的圖標，額外一種是折線，它們是通

過經緯度坐標構成的。

圖標和標記
G馬克er類的建構器運用一個圖標和一個點參變量並供給一個小系列的事情對象(如裸機)等等。上頭的

ovrlay.htm例子就供給了一個簡單的開創標記的例子。
開創標記最難的局部是指定圖標，它比較復雜，是由於在Maps

API中，有相當多的不一樣的圖像纔構成
一個簡單的圖標。
每個圖標有（至少有）一個前面的景物圖像和一個暗影圖像。暗影圖像需求以前面的景物圖像的45度角方位開創，

暗影圖像的左下角務必與圖標前面的景物圖像的左下角綁定在一塊兒。暗影需求是一個24位的透明性為alpha

的PNG圖像，這麼其邊緣能力在地圖上方看起來准確。
GIcon類需求在你起初化他們的時刻指定這些個影像的尺寸，這麼Maps

API能力開創合宜體積的圖像元
素。這是指定一個圖標所需求的最少量的代碼(在這處，圖標是google

maps中運用)。
var icon = new GIcon();
icon.image = /mapfiles/馬克er.png;
icon.shadow = /mapfiles/shadow50.png;
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);
GIcon類供給了額外7個屬性，你應當設定這些個屬性來使你的圖標獲得最多的瀏覽器兼容性和功能。例如，imageMap屬性指定了圖標圖形中不透明的局部的形shy;-狀。假如你沒有在你的圖標對象中設定這個屬性，整個兒的圖標圖像（涵蓋透明局部）將會在Firefox/Mozilla瀏覽器中變得可以點擊的。檢查GIconshy;類-參照獲得更多的消息兒。

折線(Polylines)
GPolyline類建構器運用一系列的經緯度二維數組作為參變量。你可以指定線的顏色，寬度和公開度。顏色可以用老的HTML式樣指定，如#FF0000.shy;-GPloyline不知道以顏色單詞，如red起名稱的顏色。例如，下邊的代碼開創一個兩點之間的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的服務器中煩請線的圖像

並將圖像疊加在地圖上，在地圖被縮放和隨意游玩時，酌情按F5地圖。

扼制器(Controls)
Controls運用addControl辦法被添加上去.Maps
API供給了一套內嵌的扼制器，你可以在地圖裡邊使
用它們：
GLargeMapControl－一個在Google
Maps上的大的縮放/隨意游玩工具。
GSmallMapControl－一個在Google
Local上的小一點的縮放/隨意游玩工具
GSmallZoomControl-一個小的縮工人下班具，在Geegle
Maps上一個小的彈出窗戶中運用它來顯露一定的
方向。
GMapTypeControl－讓你在不一樣的Map類型中施行切換（如map和satellite）

例如，要添加一個你在google
maps上看見的縮放/隨意游玩扼制器到你的地圖上，你需求在你的地圖起初

化時引入下邊的一行代碼
map.addControl(new GLargeMapControl());

XML和RPC
Google Maps
API供給了一個工廠辦法來開創XmlHttpRequest對象，這些個對象在近期版本的IE，

FireFox和Safari中都能運用。例如：
var request = GXmlHttp.create();
request.open(‘GET’, myfile.txt, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
alert(request.responseText);
}

}

request.send(門裡出身);
你可以運用靜態辦法Gxml.parse來解析一個XML文檔，它只消一個XML字符串作為惟一的參變量。這個辦法對全部的瀏覽器都兼容，假如瀏覽器沒有本地的shy;-XML解析器的話，它將運用一個javascriptXML解析器作為援軍。我們不可以對這些個後備的解析器在性能和准確性上作出來擔任何保障。

The Blog

SEO諮詢: (852) 27208908