1. 程式人生 > >Google Map Api 谷歌地圖接口整理

Google Map Api 谷歌地圖接口整理

服務器 依次 wheel gets 並且 ast utf 整理 實例化

一:基本知識:

1. 使用谷歌地圖 API 的第一步就是要註冊一個 API 密鑰,需要註重一下兩點:

1.假如使用 API 的頁面還沒有發布,只是在本地調試,可以不用密鑰,隨便用個字符串代替就可以了。

2.API 密鑰只對網站目錄或者域有效。對不同域的網頁,需要用這些域分別註冊不同的密鑰

2.頁面引用javascript文件<script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=abcdefg" type="text/javascript"></script>

URL(http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=abcdefg)解析:

1.ditu.google.com:也可以用ditu.google.cn,假如你需要在地圖上顯示大陸以外的具體地圖,就用 maps.google.com

2.file=api 這個是請求API 的JS 文件用的,固定的格式。

3.hl=zh-CN

這個是在設定地圖上除了地圖圖片以外的諸如控件名稱、版權聲明、使用提示等所需要顯示文本的語言版本時候用的,假如沒有指定這個參數就使用 API 的默認值,對itu.google.com 來說,默認是中文簡體aps.google.com 默認的是英文。

4. v=2

這個是用來指定需要導入的 API 類庫的版本號,可以有四種設定方式:

v=2.s 穩定版本,更新最慢,但是最可靠;

v=2 當前版本(只用主版本號),更新速度和可靠性介於 s 和 x 之間

v=2.x 最新版本,更新最快,包括最新功能,可能沒有當前版本可靠;

v=2.76 指定具體版本。不建議使用。

註:目前谷歌地圖 API的主版本號是2,當API升級時舊版本只能繼續使用一個月,所以要及時更改主版本號,版本號改變會在Google Code和Maps API討論組發布相關信息

5.key=abcdefg這個是設定你註冊的 API 密鑰.

二:核心類:

google地圖API主要包括:地圖類(GMap2)、標記類(GMarker)、標記選項類(GMarkerOptions)、折線類 (GPolyline)、經緯度(GLatLng)、命名空間(GEvent)、坐標類(GPoint)、控件的大小類GSize、 interface(GControl)、地圖類型類(GMapType)、地圖上面的圖標類(GIcon)、窗體類(GInfoWindow)、窗體選 項類 GInfoWindowOptions)、接口GOverlay、枚舉GMapPane等等

註:標記和折線都是地圖的覆蓋物

1.GMap2:地圖類,下面實例化一張地圖:

var map= new GMap2(container: DOM_Div,opts: Options);

構造函數的參數如下:

參數 是否必要 值類型 定義

container 是 DOM_Div DOM元素,是個Div

opts 可選 Options 構造函數選項

GMap2包含的方法:

1.設置狀態的方法:

enableDragging():設置地圖可以被拖動。

disableDragging():禁止地圖被拖動。

draggingEnabled():返回地圖是否能夠被拖動的布爾值。假如能夠拖動,返回"真";否則返回"假"。

enableInfoWindow():設置地圖信息窗口可以彈出。

disableInfoWindow():禁止地圖信息窗口彈出。

infoWindowEnabled():返回地圖信息窗口是否能夠被彈出的布爾值。假如能夠彈出,返回"真";否則返回"假"。這個方法通常作為檢驗之用。

enableDoubleClickZoom():設置可以雙擊縮放地圖,左鍵雙擊為放大,右鍵雙擊為縮小(默認)。

disableDoubleClickZoom():禁止雙擊縮放地圖,Google Earth 默認為禁止雙擊縮放。

doubleClickZoomEnabled():返回地圖是否可以雙擊縮放的布爾值。假如能夠雙擊縮放,返回"真";

enableContinuousZoom():設置地圖可以連續平滑地縮放。

disableContinuousZoom():禁止地圖連續平滑地縮放。

continuousZoomEnabled():返回地圖是否可以連續平滑地縮放的布爾值。假如能夠連續平滑地縮放,返回"真";否則返回"假"。

enableScrollWheelZoom():設置地圖可以由鼠標滾輪控制縮放。

disableScrollSheelZoom():禁止由鼠標滾輪控制地圖縮放。

scrollWheelZoomEnabled():返回地圖縮放是否可以由鼠標滾輪控制。假如能夠由鼠標滾輪控制縮放,返回"真";否則返回"假"。

isLoaded() 返回類型布爾值 假如地圖已經被setCenter()初始化,則返回true.

2.得到地圖的數據信息方法:

getCenter() 返回類型GLatLng 返回地圖中心點的地圖坐標.

getBounds() 返回類型GLatLngBounds 返回地圖視口範圍的矩形區域的地理坐標.

getBoundsZoomLevel(bounds) 返回類型數字返回顯示指定的區域需要的最適合的地圖縮放等級.該縮放等級是根據當前的地圖類型計算出來的,假如還沒有指定地圖類型,將使用地圖類型數組之中的第一項.

getSize() 返回類型GSize 返回地圖視口的像素大小.

getZoom() 返回數字 返回當前的縮放等級.

getContainer():取得地圖的容器

getCurrentMapType()得到當前的地圖類型。註重得到的是地圖類型GMapType對象,而不是對象名稱

3.設置地圖:

setCenter(center, zoom?, type?)將地圖視圖切換到指定的中心點,也可以同時設置可選的地圖縮放等級和地圖類型.地圖類型必須已經添加到地圖.

addMapType()該方法必須在構造地圖實例之後初始化地圖狀態時立即執行.在地圖剛剛構造的時候調用地圖其他的方法都將會產生錯誤.

panTo(center) 設置地圖的中心點到指定的坐標,假如該點已經在當前的視口之中,則地圖中心會滑動到該位置.

panBy(distance) 地圖滑動指定的像素距離.

panDirection(dx, dy) 以指定的方向滑動地圖寬度一半的距離.+1代表右方和下方,-1代表左方和上方.

setZoom(level)設置地圖的縮放等級到給定值.

zoomIn()縮小地圖(將地圖的縮放等級增加1).

zoomOut()放大地圖(將地圖的縮放等級減少1).

savePosition()保存地圖當前的位置和縮放等級,以供以後通過returnToSavedPosition()方法來返回當前視圖.

returnToSavedPosition()返回到上一次通過savePosition()保存的地圖視圖.

checkResize()檢查地圖容器(container)的大小是否已經發生變化,在地圖容器DOM大小可能發生變化的時候調用該方法,以便地圖能進行自動調整.

setMapType(GMapType):設置地圖類型:大概有三種類型:G_NORMAL_MAP,G_SATELLITE_MAP,G_PHYSICAL_MAP,

removeMapType(GMapType)從當前地圖上刪除一個地圖類型。

enableGoogleBar():設置地圖上的搜索欄

4.有關地圖覆蓋物的方法:

addOverlay(overlay) 在地圖上添加一個標註並觸發地圖的addoverlay事件.

removeOverlay(overlay) 在地圖上刪除指定的標註.假如該標註確實在地圖上.

clearOverlays()刪除所有地圖上的標註.

5.有關信息浮窗的方法:

openInfoWindow(point, node, opts?)在指定的地理點打開一個簡單的信息浮窗.滑動地圖以保證打開的信息浮窗可見.信息浮窗的內容以DOM節點的形式給定.

openInfoWindowHtml(point, html, opts?)在指定的地理點打開一個簡單的信息浮窗.滑動地圖以保證打開的信息浮窗可見.信息浮窗的內容以HTML文本的形式給定.

openInfoWindowTabs(point, tabs, opts?)在指定的地理點打開一個分標簽的信息浮窗.滑動地圖以保證打開的信息浮窗可見.信息浮窗的內容以DOM節點的形式給定.

openInfoWindowTabsHtml(point, tabs, opts?)在指定的地理點打開一個分標簽的信息浮窗.滑動地圖以保證打開的信息浮窗可見.信息浮窗的內容以HTML文本的形式給定.

showMapBlowup(point, opts?)在指定的地理點打開一個顯示指定點更近的視圖的信息浮窗.

closeInfoWindow()關閉當前打開的信息浮窗.

getInfoWindow() 返回類型GInfoWindow 返回地圖的信息浮窗對象.假如當前並不存在信息浮窗,則創建一個信息浮窗而不顯示它.這個操作並不被enableInfoWindow()影響.

6.控件的方法:

addControl(GControl)添加一個google地圖的控件

RemoveControl(GControl)刪除一個google地圖的控件

7. 示例:

var map = new Map2(document.getElementByIdx_x_x("map"),{size:GSize(200,200), backgroundColor:"#FF0000"});

map.addControl(new GSmallMapControl());//添加一個地圖左側的縮放按鈕控件

map.addControl(new GMapTypeControl());//添加地圖類型控件包括普通地圖、衛星地圖、混合地圖

map.setCenter(new GLatLng(37.4419, -122.1419), 13); //實例化一個維度為37.4419、經度為 -122.1419的經緯度實例,然後設置地圖的中心。地圖縮放值為13

// Add 10 markers in random locations on the map

var bounds = map.getBounds();//得到地圖四面的邊界值

var southWest = bounds.getSouthWest();//西南的經緯度

var northEast = bounds.getNorthEast();//東北的經緯度

var lngSpan = northEast.lng() - southWest.lng();//經度差

var latSpan = northEast.lat() - southWest.lat();//維度差

//實例化一個在本張地圖中的一個經緯度

var point = new GLatLng(southWest.lat() + latSpan * Math.random(),

southWest.lng() + lngSpan * Math.random());

var marker = new GMarker(point);//實例化一個標點

//給標點加click事件,當點擊標點時彈出一個信息窗

GEvent.addListener(marker, "click", function() {

marker.openInfoWindowHtml("<b>hello</b>");

});

map.addOverlay(marker);//把標點添加到地圖覆蓋物

2.GMapOptions類:

這個類型包含以下4個屬性

1.size

默認情況下,你創建的地圖大小就是你給定的地圖容器的大小,所以,通常情況下,你需要顯式的聲明你的地圖容器的width和height屬性,否則,地圖 是不能正常顯示的,但是,有了size這個可選屬性後,你就多了一個選擇了。你可以在創建地圖的時候直接通過size這個屬性指定地圖的大小,而不需要聽 命於地圖容器了,即使這個地圖容器已經顯示的定義了width和height的大小。當然,size屬性對應的值是一個GSize類型的數據,比如,假如 給定options={size:GSize(400, 300)},那麽,你所創建的地圖大小就是400×300的一個 矩形塊,而和你指定的容器大小無關。

2.mapType

創建地圖後,默認顯示的地圖類型是普通地圖,假如要加上可以選擇的衛星地圖、地形地圖等等其他類型的地圖,可以使用 GMap2.setMapType()方法,但這樣往往會羅列一堆的setMapType。GMapOptions提供了mapTypes這個可選項,通 過一個數組就可以給地圖加上多種支持類型,比如使用{mapTypes: [G_NORMAL_MAP,G_SATELLITE_MAP,G_PHYSICAL_MAP]}

,你的地圖就擁有三種普通、衛星、地形三種類型了。mapTypes數組中的第一項是地圖加載的默認類型,所以,假如你想默認加載衛星地圖,把G_SATELLITE_MAP移到數組的第一項就可以了。

3.draggableCursor、draggingCursor

這兩個選項是用來定義地圖上你的光標類型,我把它們放在一起介紹不等於它們必須一起使用,你可以單獨使用任何一個。其中,draggableCursor 是地圖可拖拽狀態(默認就是可拖拽的)下的光標,draggingCursor是拖拽地圖時的光標,對應的值和你在JavaScript裏面設置其他的光 標時使用的值一樣,比如,

{draggableCursor:"crosshair",draggingCursor:"move"}。當然,你也可以使用url形式加上你自己的圖標

4.backgroundColor

在地圖圖塊的圖片還沒有傳送完成之前,地圖的顯示區域默認會使用灰色填充,這個就是backgroundColor可以發揮作用的地方了,你可以把灰色換成其他任何符合W3C標準的顏色

5.googleBarOptions

這個和你在地圖上通過GMap2.enableGoogleBar()時有關系,指定你添加GoogleBar時的一些默認屬性

示例:

var options = {size:GSize(400, 300), backgroundColor:"#FF0000"};

var map = new GMap2(document.getElementByIdx_x_x("mapContainer"), options);

3.GMarker類

構造函數:

1.GMarker(point, icon?, inert?) 在指定位置point使用指定圖標icon或G_DEFAULT_ICON創建一個標記.假如inert參數為true,該標記將不可點擊而且沒有任何參數.(2.50版本不再支持)

2.GMarker(point, opts?) 在指定位置point使用指定的選項GMarkerOptions創建一個標記.默認標記能夠點擊並使用默認圖標G_DEFAULT_ICON. (從 2.50開始支持)

Gmarker包含的主要方法:

1.openInfoWindow(content, opts?) 在標記圖標之上打開地圖信息窗口。信息窗口的內容為 DOM 節點。僅適用於 GInfoWindowOptions.maxWidth 選項。

2. openInfoWindowHtml(content, opts?) 在標記圖標之上打開地圖信息窗口。信息窗口的內容顯示為包含 HTML 文本的字符串。僅適用於 GInfoWindowOptions.maxWidth 選

項。

3.getIcon() GIcon 如構造函數所設置的,返回此標記的 icon。

4.getTitle() String 如構造函數通過 GMarkerOptions.title 屬性所設置的,返回此標記的標題。假如未傳入標題,則返回“undefined(未定義)”(自 2.85 開始)

5.getPoint() GLatLng 如構造函數或 setPoint() 所設置的,返回此標記錨定的地理坐標。(自 2.88 開始建議不要使用)

6.getLatLng() GLatLng 如構造函數或 setLatLng() 所設置的,返回此標記錨定的地理坐標。(自 2.88 開始)

7.setPoint(point) none 設置此標記所錨定點的地理坐標。(自 2.88 開始建議不要使用)

8.setLatLng(point) none 設置此標記所錨定點的地理坐標。(自 2.88 開始)

9.enableDragging() none 答應在地圖上拖拽標記。對於函數,必須已經用 GMarkerOptions.draggable = true 初始化標記。

10.disableDragging() none 禁止在地圖上拖拽標記。

11.draggable() Boolean 假如已使用 GMarkerOptions.draggable = true 通過構造函數對標記進行了初始化,則返回 true。否則,返回 false。

12.draggingEnabled() Boolean 假如當前答應用戶在地圖中拖拽標記,則返回 true。

13.setImage(url) none 請求將 url 指定的圖像設置為此標記的前景圖。註:不調整打印圖像和陰影圖像。因此,此方法主要是為了達到高亮顯示或變暗顯示效果,而不是徹底改變標記的外觀。(自 2.75 開始)

15.hide() none 假如當前標記可見,則隱藏標記。註:假如當前標記可見,則此函數會觸發 GMarker.visibilitychanged 事件。(自 2.77 開始)

16.show() none 假如當前標記不可見,則顯示標記。註:假如當前標記不可見,則此函數會觸發 GMarker.visibilitychanged 事件。(自 2.77 開始)

17.isHidden() Boolean 假如當前標記不可見,則返回 true。否則,返回 false。(自 2.77 開始)

示例:

1.

var point = new GLatLng(pointx,pointy);

var icon = new GIcon();

icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";

var myMarker = new GMarker(point, icon);

alert(myMarker.getIcon().image);

2.

var point = new GLatLng(pointx,pointy);

var myMarker = new GMarker(point,{draggable:true});//可拖拽的標記

alert(myMarker.getPoint());

4.GPolyline類

構造函數

GPolyline(latlngs, color?, weight?, opacity?, opts?) 根據頂點數組創建折線。color 是一個字符串,包含十六進制數字、HTML 樣式的顏色,即 #RRGGBB。weight 是以像素表示的線寬度。 opacity 為 0 到 1 之間的數字。該線條是消除鋸齒且半透明的。

GPolyline包含的方法

1.getVertexCount() Number 返回折線的頂點數目。(自 2.46 開始)

2.getVertex(index) GLatLng 返回折線中給定索引值對應的頂點。(自 2.46 開始)

3.getLength() Number 返回沿地球表面的折線長度(以米表示)。(自 2.85 開始)

4.getBounds() GLatLngBounds 返回此折線的邊界。(自 2.85 開始)

5.hide() none 假如當前折線可見並且 GPolyline.supportsHide() 返回 true,則隱藏此線。註:假如當前折線可見,則此函數會觸發 GPolyline.visibilitychanged 事件(自 2.87 開始)

6.isHidden() Boolean 假如當前折線不可見,則返回 true。否則,返回 false。(自 2.87 開始)

7.show() none 假如當前折線不可見,則顯示該線。註:假如當前折線不可見,則此函數會觸發 GPolyline.visibilitychanged 事件。(自 2.87 開始)

8.supportsHide() Boolean 假如當前環境下支持 GPolyline 對象的 GPolyline.hide(),則返回 true。否則,返回 false。(自 2.87 開始)

註:假如您想在地圖裏面顯示折線,您需要在您的XHTML文檔裏面包含VML命名空間和一些CSS代碼,這樣可以令它們在IE下面可以正常工作。XHTM文檔的開頭看起來就像這

樣:

<!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>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>My Google Maps Hack</title>

<style type="text/css">v\:* {behavior:url(#default#VML);}

</style>

<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script>

</head>

5.GLatLng類

構造函數:

GLatLng(lat, lng, unbounded?) 註重緯度和經度的順序。假如 unbounded 標記為 true,則表示數字以原始輸入狀態使用,否則緯度將在 -90 度到 +90 度之間,而經度在 -180 度和 +180 度之間周而復始。

GlatLng包含的方法:

lat() Number 返回以度數表示的緯度坐標(-90 到 +90 之間的數值)。假如在構造函數中設置了 unbounded 標記,則緯度坐標值可能超出此範圍。

lng() Number 返回以度數表示的經度坐標(-180 到 +180 之間的數值)。假如在構造函數中設置了 unbounded 標記,則經度坐標值可能超出此範圍。

6. GPoint類

GPoint 是以像素坐標表示的地圖上的一點。註重:在 v2 中,它不再是以地理坐標表示的地面上的一個點。現在,地理坐標可以用 GLatLng 表示。

在地圖坐標系統中,x 坐標向右增大,y 坐標向下增大。

註重:GPoint 的兩個參數同 x 和 y 屬性一樣可訪問,但最好不要修改它們,而是在創建新對象時使用不同的參數。

7. GEvent命名空間

此命名空間包含的函數可用於註冊事件處理程序(既處理自定義事件也處理 DOM 事件)和觸發自定義事件。此 API 定義的所有事件都是由 GEvent.trigger() 內部觸發的自定義事件。

addListener(source, event, handler) 返回GEventListener 為源對象的自定義事件註冊事件處理程序。返回一個可用於最終註銷處理程序的句柄。事件觸發時,this 將被設置為源對象,同時調用事件處理程序。

addDomListener(source, event, handler) 返回GEventListener 為源對象的 DOM 事件註冊事件處理程序。源對象必須為 DOM 節點。返回一個可用於最終註銷處理程序的

句柄 。事件觸發時,this 被設置為源對象,同時調用事件處理程序。此函數將 DOM 方法用於當前瀏覽器,來註冊事件處理程序。

removeListener(handle)刪除使用 addListener() 或 addDomListener() 安裝的處理程序。

clearListeners(source, event)刪除使用 addListener() 或 addDomListener() 為給定事件在給定對象上安裝的所有處理程序。

clearInstanceListeners(source)刪除使用 addListener() 或 addDomListener() 為所有事件在給定對象上安裝的所有處理程序。

trigger(source, event, ...)使源對象觸發自定義事件。將 event 後所有剩余的可選參數依次輸入給事件處理程序作為參數。

bind(source, event, object, method)返回GEventListener 將給定對象的方法調用註冊為源對象自定義事件的處理程序。返回一個可用於最終註銷處理程序的句柄。

bindDom(source, event, object, method)返回 GEventListener 將給定對象的方法調用註冊為源對象自定義事件的處理程序。返回一個可用於最終註銷處理程序的句柄。

callback(object, method) Function 返回在 object 上調用 method 的 closure。

callbackArgs(object, method, ...) Function 返回在 object 上調用 method 的closure。調用返回的函數時,將 method 後面所有余下的可選參數依次輸入 method 作為參數。

8.GClientGeocoder地址解析類:

此類用於和 Google 服務器建立直接通訊,以獲得用戶指定地址的地理位置信息。另外,地理解析器可維護自己的地址緩存,可以無需與服務器通訊而回答反復的查詢。註重:目前中國地圖地址解析器只支持市/縣/區級別的地址。

getLatLng(address, callback) 給 Google 服務器發送請求,對指定的地址進行地址解析。假如地址已成功定位,則用 GLatLng 點調用用戶指定的回調函數。否則,向回調函數提供一個 null 點。假如地址不明確,則僅向回調函數傳送最匹配的點。(自 2.55 開始)

getLocations(address, callback) 給 Google 服務器發送請求,對指定的地址進行地址解析。包含狀態代碼的答復,假如答復成功,則向用戶指定的回調函數傳送一個或多個 Placemark 對象。與 GClientGeocoder.getLatLng 方法不同,回調函數可以通過檢查 Status 字段的代碼值確定失敗原因。(自 2.55 開始)

示例:

var map = new GMap2(document.getElementByIdx_x_x("map"));

var geocoder = new GClientGeocoder();

var address="五道口";

geocoder.getLatLng(address,function(point) {

if (!point)

{

alert(address + " not found");

}

else

{

map.setCenter(point, 13);

var marker = new GMarker(point);

map.addOverlay(marker);

marker.openInfoWindowHtml(address);

alert(point);

}

});

三:下面是Google API自帶控件

GLargeMapControl:放大縮小調節桿

GMapTypeControl:地圖和衛星圖片的切換功能

GSmallMapControl:GLargeMapControl的精簡版 ,去掉了縮放的調節桿保留了縮放按鈕

GSmallZoomControl:只包括縮放按鈕,去掉了GLargeMapControl裏其他的所有控制

GScaleControl:比例尺控件

四:減少瀏覽器內存泄露

Google Maps API鼓舞使用閉包/Closures,Maps API的第二版引入一個GUnload()函數,用於最大限度地消除可能引發內存泄露的循環引用。您應該在頁面的unload事件中調

用GUnload()函數來降低您的應用程序內存泄露的風險:<body onunload="GUnload()">這個函數確實可以消除Google地圖在Internet Explorer下的內存泄露,但是假如您比較關心

內存消耗問題,您仍然應該用Drip之類的工具測試您自己網站的內存泄露情況。

五:瀏覽器兼容性

Google Maps API支持的瀏覽器種類與Google地圖網站相同。因為不同的應用程序在碰到不兼容的瀏覽器的時候需要表現不同的行為,所以Maps API提供了一個全局方法 (GBrowserIsCompatible())來檢查兼容性,但是,發現一個不兼容的瀏覽器時,它不會自動采取任何措施。 http://maps.google.com/maps?file=api&v=2裏面的腳本似乎可以在任何瀏覽器裏面解析而不產生錯誤,所以您可以在檢查瀏覽器兼容性之前就包含腳本文件。

六:相關資料的網址:

http://code.google.com/intl/zh-CN/apis/maps/

http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/reference.html

Google地圖API的同步中文文檔:http://www.codechina.org/doc/google/gmapapi/

百度文庫:http://wenku.baidu.com/view/a2885c27a5e9856a561260b2.html

csdn博客:http://blog.csdn.net/jiali765/archive/2010/03/03/5338265.aspx

http://www.jbedu.com/study/jishuwenzhang/196.html

Google Map Api 谷歌地圖接口整理