• Embed Doc
  • Copy Link
  • Readcast
  • Collections
  • CommentGo Back
 
Google Map API
  撰寫者：陳志華
 
Google Map API
Hello World
 下面的網頁會顯示一個以交通大學為中心，大小
800 * 600
   的地圖：
 <!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><meta http-equiv="content-type" content="text/html; charset=UTF-8"/><title>Google Maps JavaScript API Example: simple</title><scriptsrc="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAEfCuQGsNiSWxRgf_vfNWaRQjskl1-YgiA_BGX2yRrf7htVrbmBTEB0IH-F489GrwP8-dHLib7cKKIQ"type="text/javascript"></script><script type="text/javascript">function onLoad() {if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(24.7847, 120.9991), 13);}} //]]></script></head><body onload="onLoad()"><div id="map" style="width: 800px; height: 600px"></div></body></html>
 
Google Map API
  撰寫者：陳志華
 
嵌入
Google Map API
 在上述範例中所列出的
URL(http://maps.google.com/maps?file=api&v=1)
  是用來在 網頁中嵌入
Google Map
  電子地圖前所必須載入
Javascript
 檔的網址。網頁必須包  含一個指向此
URL
   的
<script> tag
，同時搭配上所申請的授權碼，如果得到的授  權碼是「
abcdefg
」，則寫法會像下面這樣：
 <script src="http://maps.google.com/maps?file=api&v=1&key=abcdefg"type="text/javascript"></script>
其中
v=1
   的部份表示目前使用的是
v1
   版的
Google Map API
，此一
URL
  會自動 在網頁中嵌入
v1
   版目前最新的
API
，若未來推出
v2
   版
API
   時，只需要將
v=1
  更改為
v=2
   即可切換為嵌入
v2
   版
API
。
 
基本
 
 下面的範例
(
   跟前面提過的相同
)
  會產生一個以交通大學為中心的地圖，可以自由   的用滑鼠拖曳此地圖。
 var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(24.7847, 120.9991), 13);
改變地圖中心位置
 
panTo
函式是用來設定地圖的中心位置，若新的中心點位置有包含在目前的地圖   顯示範圍內時，地圖以滑動的方式移至新中心點，反之則會直接跳至新的中心點  位置。
 
 下面的範例會先顯示交通大學的地圖，然後在兩秒後移動到向東
0.003
  度
(
經度
)
   的地方。
 var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(24.7847, 120.9991), 13);window.setTimeout(function() {map.panTo(new GLatLng (24.7847, 121.0021));}, 2000);
 
Google Map API
  撰寫者：陳志華
 
為地圖加上控制列
 
 如果要在地圖上加上可以操作地圖的控制列，必須使用
addControl
函式，在下面   的範例中在地圖中加上了一個簡易的縮放工具列
GSmallMapControl()
  及一個衛  星地圖切換工具列
GMapTypeControl()
。
 var map = new GMap2(document.getElementById("map"));map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());map.setCenter(new GLatLng(24.7847, 120.9991), 13);
結合
Google Earth
 如果要在地圖上加上可以操作地圖的控制列，必須使用
addControl
函式，在下面   的範例中在地圖中加上
3D
  衛星地圖
G_SATELLITE_3D_MAP
，並加入完整的縮放 工 具 列
GLargeMapControl()
及 一 個
3D
衛 星 地 圖 切 換 工 具 列
GHierarchicalMapTypeControl()
。
 var map = new GMap2(document.getElementById("map"));map.addMapType(G_SATELLITE_3D_MAP);map.addControl(new GLargeMapControl());map.addControl(new GHierarchicalMapTypeControl());map.setCenter(new GLatLng(24.7847, 120.9991), 13);
結合路徑規劃
 
 如果要在地圖上加入路徑規劃之路線和道路資訊，必須先於網頁中加入
<div>
 標籤，並命名其
id
  名稱以供後續存放道路資訊
(
以下以
<div id="route">
 為例
)
，再使  用
GDirections
 類別產生路徑規劃物件，最後再呼叫
load()
函式，並輸入起點座標
(from)
  和終點座標
(to)
，在下面的範例中在地圖中加入路徑規劃功能。
 var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(24.7847, 120.9991), 13);directionsPanel = document.getElementById("route");directions = new GDirections(map, directionsPanel);directions.load("from: "+y1+","+x1+" to: "+y2+","+x2, // from
 起點座標和
to
終點座標
 {travelMode:G_TRAVEL_MODE_DRIVING} // 
採用開車模式
 );
of 00

Leave a Comment

You must be to leave a comment.
Submit
Characters: ...
You must be to leave a comment.
Submit
Characters: ...