Google Maps

Download Report

Transcript Google Maps 

雲端技術概論
Chapter 5-1: Google Maps API
林俊言
102/05
Outlines:
Google Maps 簡介
Google Maps API
GMap2
GEvent
Gcontrol
Google Maps 簡介
Google地圖（Google Maps），
前稱Google Local
Google 向全球提供的電子地圖服務系統
 向量地圖(傳統地圖)>>提供政區和交通以及商業資訊
 不同解析度之衛星照片>>俯視圖，與Google earth衛星
照片相同
 地形圖>>>可以可以用以顯示地形和等高線。
Google Maps 簡介
What’s Google Map API ?
Web page
1
3
2
grab
tell
Map
5
link
Google map
Google
Map
API
4
get
Part of
Google Map
Goole Maps API 使用上的法律限制：
 你的 Google Maps 服務必須免費開放給一般使用者。
 如果你預估你的地圖服務會有超過每天 50,000 筆頁面
的存取量，請主動聯絡 Google。
 Google 會不定期更新 API，你有責任跟著更新你的網
頁中的 API。
 你不能更改或隱藏 Google 的 logo。
 Google 有權力以後在地圖上放廣告，而你不能更改或
破壞這些廣告。
 有些地圖應用是 Google 不希望看到的，例如指明哪
些地方可以購買到毒品或是任何違法行為。
http://www.google.com/intl/zh-TW_ALL/help/terms_maps.html
Google Maps API
Google Maps API 申請
網址 http://code.google.com/apis/maps/signup.html
Google Maps API

My Web Site URL:
 公司或學校網址
 自我本機測試: http://localhost/
 Map key:
ABQIAAAAvc18gggFBqeAgJtzjlof_hT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQPc35CyLmR
pKyvtql60UTfXxjfYA
Google Maps API
Maps Key
 相關程式範例
 Http Example:
http://maps.google.com/maps/geo?q=1600+Amphitheatre+Parkway,+Mountain+View
,+CA&output=json&oe=utf8\
&sensor=true_or_false&key=ABQIAAAAvc18gggFBqeAgJtzjlof_hT2yXp_ZAY8_uf
C3CFXhHIE1NvwkxQPc35CyLmRpKyvtql60UTfXxjfYA
Maps Key
Google Maps API
 Helloworld.html 程式碼
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script
src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQI
AAAAEqnQIkVg5pazaeO6vBrjkBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSZd
QaY4DGjSyPw-fvLHbdatG-5pw" type="text/javascript">
</script>
<script type="text/javascript">
:
:
: 由於是用JavaScript 語言來使用Google Maps API
>>>程式碼放入 <script></script>
Google Maps API
建立initialize 之JavaScript 之函式
去建立與設定Google Maps
function initialize() {
//測試瀏覽器是否支援Google Maps API
if (GBrowserIsCompatible()) {
//建立地圖物件並給定HTML元素區塊
var map = new GMap2(document.getElementById("map_canvas"));
//設定地圖中心，並初始化地圖物件
map.setCenter(new GLatLng(23.32411,120.274994), 13);
}
}
</script>
:
:
Google Maps API
</head>
關閉網頁時，利用Gunload()釋放
記憶體
<!-- 載入initialize函式 -->
<body onload="initialize()" onunload="GUnload()">
載入網頁時，執行指定函式 initialize()
<!-- 設定HTML元素區塊以放置地圖物件 -->
<div id="map_canvas" style="width: 500px; height: 300px">
</div>
</body>
</html>
Google Maps API
 Helloworld.html 執行結果
Google GMap2 API
 GMap2
 具現化GMap2 以建立地圖。這是 API 的中心類別，
任何其他東西都是附屬的。
http://code.google.com/intl/zh-TW/apis/maps/documentation/javascript/v2/reference.html#GMap2
 建構函式：
方法
傳回值
說明
enableDragging()
None
啟用地圖的拖曳 (預設會啟用)。
disableDragging()
None
停用地圖的拖曳。
draggingEnabled()
Boolean
傳回 true(在啟用拖曳地圖的情形下)。
Google GMap2 API
 GMap2
 具現化GMap2 以建立地圖。這是 API 的中心類別，
任何其他東西都是附屬的。
http://code.google.com/intl/zh-TW/apis/maps/documentation/javascript/v2/reference.html#GMap2
 建構函式：
方法
傳回值
說明
enableDragging()
None
啟用地圖的拖曳 (預設會啟用)。
disableDragging()
None
停用地圖的拖曳。
draggingEnabled()
Boolean
傳回 true(在啟用拖曳地圖的情形下)。
Google GMap2 API
 加入視窗顯示拖曳功能狀態
:
map.setCenter(new GLatLng(23.32411,120.274994), 13);
}}
function showStatus(){
//彈出視窗顯示地圖拖曳功能狀態
var status = map.draggingEnabled();
window.alert(status);
}
</script>
加入視窗顯示拖曳功能函式
:
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<input type="button" value="取得地圖拖曳狀態"
onclick="showStatus()" />
</body></html>
加入按鈕
Google GMap2 API
 Helloworld.html 執行結果
Google GMap2 API
 GMap2
 具現化GMap2 以建立地圖。這是 API 的中心類別，
任何其他東西都是附屬的。
http://code.google.com/intl/zh-TW/apis/maps/documentation/javascript/v2/reference.html#GMap2
 建構函式：
方法
傳回值
說明
enableDoubleClickZoom()
None
啟用按兩下來進行放大和縮小 (預設會啟用)。
disableDoubleClickZoom()
None
停用按兩下來進行放大和縮小。
doubleClickZoomEnabled()
Boolean
傳回 true(在啟用按兩下以進行縮放的情形
下)。
Google GMap2 API
 加入視窗顯示拖曳功能狀態
:
map.setCenter(new GLatLng(23.32411,120.274994), 13);
}}
function showStatus(){
//彈出視窗顯示地圖雙擊功能狀態
var status = map.doubleClickZoomEnabled();
window.alert(status);
}
</script>
加入視窗顯示拖曳功能函式
:
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<input type="button" value="取得雙擊滑鼠鍵縮放地圖功能狀態"
onclick="showStatus()" />
</body></html>
加入按鈕
Google GMap2 API
 Helloworld.html _放大(縮放) 執行結果
2
1
確定開啟雙
擊左(右)鍵放
大(縮放)功能
Google GMap2 API
 Helloworld.html _放大(縮放) 執行結果
1 雙擊左鍵放大功能
2 雙擊右鍵縮放功能
Google GMap2 API
 MapTypes()
 Google 提供部分預先定義的地圖類型 - 此類別會
用來定義自訂的地圖類型。要在地圖上顯示自
訂的地圖類型，請使用 GMap2
http://code.google.com/intl/zh-TW/apis/maps/documentation/javascript/v2/reference.html#GMapType
屬性
說明
G_NORMAL_MAP
一般地圖。
G_SATELLITE_MAP
衛星圖片。
G_HYBRID_MAP
包含一般地圖與衛星地圖混合地圖
G_PHYSICAL_MAP
地形地圖
Google GMap2 API
 取得目前地圖類型
function getCurMapType(){
//取得目前使用的地圖類型
window.alert("目前的地圖類型: " +
map.getCurrentMapType().getName());
}
 設定目前地圖類型
function setMapType(){
//設定目前的地圖類型為地形地圖
map.setMapType(G_PHYSICAL_MAP);
}
Google GMap2 API
 移除地形地圖
function removeMapType(){
//移除註冊地圖類型控制項中的地形地圖類型
map.removeMapType(G_PHYSICAL_MAP);
}
 增加地形地圖
function addMapType(){
//註冊地圖類型控制項中的地形地圖類型
map.addMapType(G_PHYSICAL_MAP);
}
Google GMap2 API
 執行結果
程式：maptype.html
Google GMap2 API
 取得目前地圖中心點地理座標
function getCenter(){
//取得中心點地理座標
window.alert(map.getCenter());
}
 設定目前地圖物件可視矩形區域
function getBounds(){
//取得地圖可視矩形區域
window.alert(map.getBounds());
}
Google GMap2 API
 取得目前地圖物件可視矩形區域縮放級距
function getBoundsZoomLevel(){
//取得地圖可視矩形區域縮放級距
window.alert(map.getBoundsZoomLevel(map.getBounds()));
}
 取得地圖物件的大小
function getSize(){
//取得地圖物件的大小
window.alert(map.getSize());
}
Google GMap2 API
 取得目前地圖物件的縮放等級
function getZoom(){
//"取得地圖物件的縮放等級
window.alert(map.getZoom());
}
 範例程式: maptype1.html
Google GMap2 API
 執行結果
程式：maptype1.html
Google GMap2 API
 GMapOptions
 透過GMapOptions 物件屬性值，可以對GMap2物
件進行相對應的顯示方式。
Syntax:
var mapOptions={
屬性：值
……
屬性：值
}
http://code.google.com/intl/zh-TW/apis/maps/documentation/javascript/v2/reference.html#GMapType
Google GMap2 API
 GMapOptions
屬性
說明
size
設定地圖的大小 (以像素為單位
mapTypes
此地圖使用的地圖類型陣列
draggableCursor
拖曳地圖時所顯示的游標
draggingCursor
拖曳地圖時顯示游標。
BackgroundColor
此 Property 指定顯示在地圖方塊後方的色彩。此色彩可
以是任何有效的 http://www.w3.org/TR/REChtml40/types.html#h-6.5
Google GMap2 API
 GMapOptions
function initialize() {
if (GBrowserIsCompatible()) {
var mapOptions = {
size: new GSize(200,200),
backgroundColor: "#FF69B4",
draggableCursor :"move" ,
draggingCursor : "crosshair",
mapTypes : [G_SATELLITE_MAP,G_NORMAL_MAP] };
map = new GMap2(document.getElementById("map_canvas"),mapOptions);
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(23.32411,120.274994), 13);
}
}
Google GMap2 API
 執行結果
程式：mapoptions.html
Google GPoint
GPoint
GPoint以點的像素座標來代表地圖上的點。
地理座標現在是以 GLatLng 呈現。
在「Google 地圖」座標系統中:
 x 座標會向右增加
 y 座標會向下增加
Syntax:
GPoint(x:Number, y:Number)
x：代表經度
y：代表緯度
Google GPoint
Gpoint
 Property
Property
類型
說明
x
Number
x 座標。(在「Google 地圖」座標系統中，此值會
向右增加。)
y
Number
y 座標。(在「Google 地圖」座標系統中，此值會
向下增加。)
方法
傳回值
說明
equals(other:
Gpoint)
Boolean
toString()
String
Method
傳回 true(在其他點有相同座標的情形下)。
以此順序傳回包含 x 和 y 座標的字串，並以逗號
分隔。
Google GSize
GSize
地圖的矩形區域的大小 (以像素為單位)
大小物件具有兩個參數，width 和 height。
 Width: 寬度
 height: 高度
Syntax:
GSize(width:Number, height:Number)
width：代表寬度
height：代表高度
Google GSize
GSize
 Property
Property
類型
說明
width
Number
寬度參數。
height
Number
高度參數。
Method
方法
傳回值
equals(other:
GSize)
Boolean
toString()
String
說明
傳回 true(在其他大小有完全相同的元件的情形下)。
以此順序傳回包含寬度和高度的字串，並以逗號
分隔。
Google GBounds
GBounds
像素座標中地圖的矩形區域。
在地理座標中的矩形是由GLatLngBounds 物件來
代表。
Syntax
GBounds(points:GPoint[]);
Property
類型
Property
類型
minX
Number
maxX
Number
minY
Numbe
maxY
Numbe
Google GBounds
Property
類型
說明
toString()
String
以此順序傳回包含方塊之左上角和右下角座標的字
串，由逗號分隔，並以括弧圍住。
Equals
(other:GBounds)
Boolean
傳回 true，如果在此矩形中的所有參數與其他的參
數相同。
mid()
GPoint
傳回矩形區域中心的像素座標。
min()
GPoint
傳回矩形區域左上角的像素座標。
max()
GPoint
傳回矩形區域右上角的像素座標。
containsBounds
(other:GBounds)
Boolean
傳回 true，如果傳送的矩形區域完全包含在此矩形
區域中。
containsPoint
(point:GPoint)
Boolean
傳回 true，如果矩形區域 (含) 包含像素座標。
Extend
(point:GPoint)
None
拉大此方塊，讓該點也包含在此方塊中。
Google GBounds
 執行結果
程式：Gbounds.html
Google GLatLng
GLatLng
是地理座標 經度(longitude)和緯度(latitude) 中的點。
地圖x座標的經度(在後)、地圖 y 座標的緯度(在前)
Syntax
GLatLng(lat:Number,lng:Number,unbounded?:Boolean)
unbounded 旗標為 true，則數字會當成已經傳送
否則緯度會固定位於 -90 度和 +90 度之間，
經度會在 -180 度和 +180 度之間。
Google GLatLng
Method
類型
說明
Number
傳回緯度座標 (以度為單位)，為 -90 和 +90 之間的
數字。如果在建構函式中設定 unbounded 旗標，則
此座標可以在此範圍之外。
Number
傳回經度座標 (以度為單位)，為 -180 和 +180 之間
的數字。如果在建構函式中設定 unbounded 旗標，
則此座標可以在此範圍之外。
Number
傳回緯度座標 (以弧度為單位)，為 -PI/2 和 +PI/2
之間的數字。如果 unbounded 旗標設在建構函式中，
則此座標可以在此範圍之外。
lngRadians()
Number
傳回經度座標 (以弧度為單位)，為 -PI 和 +PI 之間
的數字。如果 unbounded 旗標設在建構函式中，則
此座標可以在此範圍之外。
Equals
(other:GLatLng)
Boolean
傳回 true(在特定捨入範圍內其他大小有相同的元件
的情形下)。
lat()
lng()
latRadians()
Google GLatLng
Method
類型
說明
distanceFrom
(other:GLatLng)
Number
傳回這個點到指定點的距離 (以公尺為單位)。地表
幾乎是圓形，因此距離誤差不會超過 0.3%。
Number
傳回這個點到指定點的距離 (以公尺為單位)。根據
預設，此距離是假設預設的赤道地球半徑為
6378137 公尺來計算。地表幾乎是圓形，因此距離
誤差不會超過 0.3%，尤其是兩極區域。您也可以
傳送選用的 radius 引數，以計算地球以外不同半徑
之球形物 GLatLng座標之間的距離。
String
以適合做為網址參數值的格式，傳回代表這個點的
字串，由逗號分隔，中間不需要空格。按照預設，
精準度會傳回 6 位數，對應之解析度為 4 吋 / 11 公
分。也可加入選用的 precision 參數，指定較低精準
度，以減少伺服器負載。
distanceFrom
(other:GLatLng,
radius?:Number)
toUrlValue
(precision?:Number)
Google GLatLng
 執行結果
程式：Glatlng.html
Google GControl
 控制項物件
讓使用者操控地圖的使用者介面
方法
說明
GSmallMapControl()
建立具有按鈕的控制項，可以往四個方向平
移、放大以及縮小。
GLargeMapControl()
建立具有按鈕的控制項，可以往四個方向平
移、放大和縮小以及縮放滑桿。
GSmallZoomControl()
建立具有按鈕的控制項，可以放大和縮小。
GScaleControl()
建立可顯示地圖比例的控制項。
Google GControl
 控制項物件
讓使用者操控地圖的使用者介面
方法
說明
GMapTypeControl()
建立標準地圖類型控制項，透過按鈕在支援
的地圖類型之間選取和切換。
GMenuMapTypeControl()
建立下拉式地圖類型控制項，在支援的地圖
類型之間切換。
建立「巢狀」地圖類型控制項，透過按鈕和
GHierarchicalMapTypeControl() 巢狀核取方塊在支援的地圖類型之間選取和
切換。
GOverviewMapControl()
建立可摺疊的總覽迷你地圖，可以參考位置
並透過拖曳進行導覽。只能放在地圖的右下
角 (G_ANCHOR_BOTTOM_RIGHT)。
Google GControl
function initialize() {
//測試瀏覽器是否支援Google Maps API
if (GBrowserIsCompatible()) {
//建立地圖物件並給定HTML元素區塊
var map = new GMap2(document.getElementById("map_canvas"));
//設定地圖中心，並初始化地圖物件
map.setCenter(new GLatLng(23.32411,120.274994), 13);
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
}
}
</script>
mapcontrol.html
:
Google GControl
 mapcontrol.html 執行結果
GMapTypeControl
GOverviewMapControl
GLargeMapControl
GScaleControl
Google GControl
function initialize() {
//測試瀏覽器是否支援Google Maps API
if (GBrowserIsCompatible()) {
//建立地圖物件並給定HTML元素區塊
var map = new GMap2(document.getElementById("map_canvas"));
//設定地圖中心，並初始化地圖物件
map.setCenter(new GLatLng(23.32411,120.274994), 13);
var gcontrol=new GsmallMapControl();
var gposition=new GControlPosition(G_ANCHOR_BOTTOM_RIGHT,
new GSize(100,100));
map.addControl(gcontrol, gposition);
)
}
}
</script>
mapcontrol1.html
:
Google GEvent
 GEvent
可用於註冊事件處理程序和觸發自訂的事件
方法
說明
addListener(source:Object,
event:String, handler:Function)
該事件處理常式會以設定至該來源物件的 this
來呼叫。
addDomListener(source:Node,
event:String, handler:Function)
此函式使用 DOM 方法為目前的瀏覽器來註冊
事件處理常式。
removeListener(handle:GEventListe 移除使用 addListener() 或 addDomListener() 安裝
ner)
的處理常式。
clearListeners(source:Object or
Node, event:String)
移除使用 addListener() 或 addDomListener() 在指
定物件上的指定事件安裝的所有處理常式。
Google GEvent
 GEvent
方法
說明
clearInstanceListeners(source:Obje
ct or Node)
移除使用 addListener() 或 addDomListener() 在指
定物件上的指定事件安裝的所有處理常式。
clearNode(source:Node)
在節點及其所有子節點上遞迴呼叫
clearInstanceListeners。
trigger(source:Object,
event:String, ...)
引發來源物件上的自訂事件。在 event 做以引
數傳送給事件處理常式函式之後，所有剩餘
的選用引數。
bind(source:Object, event:String,
object:Object, method:Function
將指定物件上的叫用方法，註冊為來源物件
上自訂事件的事件處理常式。傳回控制代碼，
可用於稍後解除註冊處理常式
Google GEvent
 GEvent
方法
說明
bindDom(source:Node,
event:String, object:Object,
method:Function)
將指定物件上的叫用方法，註冊為來源物件
上自訂事件的事件處理常式。傳回控制代碼，
可用於稍後解除註冊處理常式。
callback(object:Object,
method:Function)
傳回在 object 上呼叫 method 的 Closure。
callbackArgs(object:Object,
method:Function, ...)
傳回在 object 上呼叫 method 的 Closure。在
method 之後，叫用傳回的函式時，所有剩餘
選用引數會一一傳送為 method 引數。
Google GEvent
 addListener
source:Object
指定的地圖物件
event:String
事件名稱
handler:Function 處理物件函式
GEvent.addListener(map, "click", onClick);
:
:}
function onClick() {
window.alert("您點擊了地圖！");
}
Google GEvent
function initialize() {
建立initialize 之JavaScript 之函式
去建立與設定Google Maps
//測試瀏覽器是否支援Google Maps API
if (GBrowserIsCompatible()) {
//建立地圖物件並給定HTML元素區塊
var map = new GMap2(document.getElementById("map_canvas"));
//設定地圖中心，並初始化地圖物件
map.setCenter(new GLatLng(23.32411,120.274994), 13);
Gevent.addListener(map, “click”, onClick);
}
}
function onClick(){
window.alert(“您點擊了地圖 !”);
}
</script>
程式：mapevent1.html
:
Google GEvent
 執行結果
在地圖上 click後
程式：mapevent1.html
Google GEvent
 addDomListener
source:Object
HTML文件上的DOM物件
event:String
事件名稱
handler:Function 處理物件函式
GEvent. addDomListener(map, "click", onClick);
:
:}
function onClick() {
window.alert("您點擊了地圖！");
}
Google GEvent
function initialize() {
建立initialize 之JavaScript 之函式
去建立與設定Google Maps
//測試瀏覽器是否支援Google Maps API
if (GBrowserIsCompatible()) {
//建立地圖物件並給定HTML元素區塊
//var map = new GMap2(document.getElementById("map_canvas"));
var mapDom = document.getElementById("map_canvas");
//設定地圖中心，並初始化地圖物件
// map.setCenter(new GLatLng(23.32411,120.274994), 13);
Gevent.addListener(mapDom, “click”, onClick);
}
}
function onClick(){
window.alert("您點擊了DOM物件！");}
</script>
:
程式：mapevent2.html
</head>
<!-- 載入initialize函式 -->
<body onload="initialize()" onunload="GUnload()">
<!-- 設定HTML元素區塊以放置地圖物件 -->
<div id=“map_canvas” style=“width: 500px; height: 300px;
background: grey”>按我
</div>
</body>
</html>
Google GEvent
 執行結果
在灰色物仲上 click後
程式：mapevent2.html
Google GEvent
 removeListener
handle:GEventListener
指定事件物件
function removeListener(){
GEvent.removeListener(mapClickEvent);
GEvent.removeListener(mapDomClickEvent); }
 clearListener
source:Object
event:String
HTML文件上的DOM物件
事件名稱
function clearListeners(){
GEvent.clearListeners(map, "click");
GEvent.clearListeners(mapDom, "click"); }
Google GEvent
 clearInstanceListener
source: HTML文件上的DOM物件
function clearInstanceListeners(){
GEvent.clearListeners(map);
GEvent.clearListeners(mapDom);
}
範例程式：mapevent3.html
Google GEvent
 執行結果
在地圖上 click後
在dom 物件上 click後
程式：mapevent3.html
Google GEvent
 trigger
source:Object
event:String
para1:
地圖物件或HTML上之DOM物件
事件名稱
可代入處理事件函式中之參數
GEvent. trigger(map, "click", "trigger” );
:
:}
function onClick() {
window.alert("您是透過trigger函式呼叫的！");
}
Google GEvent
function initialize() {
建立initialize 之JavaScript 之函式
去建立與設定Google Maps
//測試瀏覽器是否支援Google Maps API
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
mapDom = document.getElementById("map_dom");
map.setCenter(new GLatLng(23.32411,120.274994), 13);
GEvent.addListener(map, "click", onClick);
GEvent.addDomListener(mapDom, "click", onClick);
}
}
function onClick(para1) {
if (para1==null) para1 = "listener";
window.alert("您透過" + para1 + "呼叫本函式！");
}
程式：mapevent4.html
Google GEvent
function trigger(){
//trigger地圖物件
GEvent.trigger(map,"click","trigger");
//trigger DOM物件
GEvent.trigger(mapDom,"click","trigger");
} </script>
</head> <body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<div id=“map_dom” style=“width: 500px; height: 25px; background:
grey”> 按我</div>
<div><input type="button" value="trigger" onclick="trigger()"
/></div>
</body></html>
程式：mapevent4.html
:
:
Google GEvent
 執行結果
在地圖上 click後
在tigger上 click後
在dom 物件上 click後
程式：mapevent4.html
Google GEvent
 bind
source:Object
event:String
object:Object
method:Function
指定地圖物件
事件名稱
處理事件的物件
處理物件的函式
GEvent. bind(map, "click", this, onClick);
:
:}
function onClick() {
window.alert("您是透過bind函式呼叫的！");
}
Google GEvent
function initialize() {
建立initialize 之JavaScript 之函式
去建立與設定Google Maps
//測試瀏覽器是否支援Google Maps API
if (GBrowserIsCompatible()) {
//建立地圖物件並給定HTML元素區塊
var map = new GMap2(document.getElementById("map_canvas"));
//設定地圖中心，並初始化地圖物件
map.setCenter(new GLatLng(23.32411,120.274994), 13);
GEvent.bind(map, "click", this, onClick);
}
}
function onClick(){
window.alert("您是透過bind函式呼叫的！");}
</script>
:
:
程式：mapevent5.html
Google GEvent
 執行結果
在地圖上 click後
程式：mapevent1.html
Google GEvent
 bindDom
source:Object
event:String
object:Object
method:Function
HTML文件上的DOM物件
事件名稱
處理事件的物件
處理物件的函式
GEvent. bindDom(mapDom, "click", this, onClick);
:
:}
function onClick() {
window.alert("您點擊了DOM物件！");
}
Google Overlay
 Overlay：地圖上綁定經緯度座標物件，因此在拖
曳或縮放地圖時會跟著移動
網頁：http://code.google.com/intl/zh-TW/apis/maps/documentation/javascript/v2/overlays.html
圖層種類
說明
標記
標記是類型 GMarker 的物件，可使用 GIcon 類型。
折線
線條是類型 GPolyline 的物件
多邊型
地圖上的區域如果是任意形狀，則會顯示為多邊形
地圖方塊
使用 GTileLayerOverlay 修改自己專用的一組地圖方
塊
資訊視窗
只能附加一個 GInfoWindow 類型的物件
Google Overlay API
 Gmarker
http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GMarker
 建構函式：
建構函式
說明
GMarker(latlng:GlatL
ng, icon?:Gicon
inert?:Boolean)
以 icon 或 G_DEFAULT_ICON 傳送的 latlng (Gpoint 或
GlatLng) 建立標記。如果 inert 旗標為 true，則標記不能按，
且無法引發任何事件。(從 2.50 開始被取代)
GMarker(latlng:GlatL
ng
opts?:GMarkerOption
s)
以 GMarkerOptions 指定的選項，在 latlng 建立標記。根據
預設，標記不僅可按，而且具有預設圖示
G_DEFAULT_ICON
Google Overlay API
 加入標記 mrak
<script type="text/javascript">
//HTML頁面載入時呼叫本函式
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(23.32411,120.274994), 13);
// 加入一定特定位置的標記
var point = new GLatLng(37.97110, 23.72601);
map.addOverlay(new GMarker(point));
}}
</script>
使用預設 G_DEFAULT_ICON
Google Overlay API
 執行結果
Google GMarker API
 改變標記圖示
<script type="text/javascript">
//HTML頁面載入時呼叫本函式
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(23.32411,120.274994), 13);
var icon = new GIcon(G_DEFAULT_ICON);
icon.image="http://maps.google.com.tw/mapfiles/ms/micons/
pink-pushpin.png";
改變標記, 並包成一集合物件
var option={icon:icon};
var marker = new GMarker(new GLatLng(23.32411,120.274994),option);
}}
</script>
Google GMarker API
 改變標記圖示, 執行結果
Google Overlay API
 資訊視窗
方法
說明
openInfoWindow(point, elemrnt, opts)
在指定點開啟簡單資訊視窗。移動
地圖，以完整顯示開啟的資訊視窗。
資訊視窗的內容指定為 DOM 節點。
openInfoWindowHtml(point, html, opts)
在指定點開啟簡單資訊視窗。移動
地圖，以完整顯示開啟的資訊視窗。
資訊視窗的內容指定為 HTML 文字。
openInfoWindowTabs(point, tabs, opts)
在指定點開啟標籤式資訊視窗。移
動地圖，以完整顯示開啟的資訊視
窗。資訊視窗的內容指定為 DOM 節
點。
openInfoWindowTabsHtml(point, tabs,
opts)
在指定點開啟標籤式資訊視窗。移
動地圖，以完整顯示開啟的資訊視
窗。資訊視窗的內容指定為 HTML 文
字。
Google Overlay API
 資訊視窗
方法
說明
showMapBlowup(point, opts)
在指定點開啟資訊視窗，該指定點包
含地圖上這個點附近的特寫。
updateInfoWindow(tabs, onupdate)
調整資訊視窗的大小以符合新內容。
在資訊視窗的內容實際變更後，會呼
叫選用的 onupdate 回呼函式。
updateCurrentTab(modifier, onupdate)
更新目前選取的標籤，會讓
GinfoWindows 物件調整大小，而不會重
新放置其位置。modifier 函式用來修改
目前選取的標籤，並將
GinfoWindowsTab做為引數傳送。在資訊
視窗顯示新的內容後，會呼叫選用的
onupdate 回呼函式。
Google Overlay API
 資訊視窗
方法
closeInfoWindow()
getInfoWindow()
說明
關閉目前開啟的資訊視窗
傳回此地圖的資訊視窗物件。如果資訊視窗
尚未存在，則會建立它，但不會顯示。
Google Overlay API
 加入 資訊視窗
<script type="text/javascript">
//HTML頁面載入時呼叫本函式
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(23.32411,120.274994), 13);
// 加入一定特定位置的標記
var point = new GLatLng(37.97110, 23.72601); 加入資訊視窗
map.addOverlay(new GMarker(point));
map.openInfoWindow(map.getCenter(),
document.createTextNode("南榮技術學院"));
}}
mapinfo1.html
</script>
Google Overlay API
 mapinfo1.html 執行結果