Google Map 技術文檔

Google Map 技術文檔

1. 申請Key

使用google map首先要申請一個key,這個key是根據網域名稱產生的，所以不同網域名稱是不能用同一個key的。申請後，要用js引進你google map 給的介面.

例如：

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

   申請key地址：        http://code.google.com/intl/zh-CN/apis/maps/signup.html

2. 建立地圖

GMap2(container, opts?)

 container,就是我們要把map嵌入到哪個容器中，一般放入層中，opts選擇性參數，例如容器的大小 new GSize(width, height);

  一般來說，我們建立個地圖通常如下所示：

var gmap = new GMap2(document.getElementById("map"));

 2.1 載入地圖

    在body的onload事件中載入，當然unload時不要忘記釋放了，這樣可防止記憶體溢出

 <body onload="initialize()" onunload="GUnload()">

 

 2.2初始化地圖  

   Map.setCenter(point,level)

Point指的是GPoint，可以標記一個經緯度的點

Level是指地圖顯示的明細度，level越大，顯示的地址越詳細

例如：

  map.setCenter(new GLatLng(39.917, 116.397), 14);

 2.3加入地圖控制器

   可以向GMap2中加入控制器，函數：addControl().

    例如：

  gmap.addControl(new  GLargeMapControl());

控制類型包括控制地圖level層級的和地圖類型的。

2.3.1 控制地圖層級的control

·         GLargeMapControl –一個大的控制地圖明細層級的控制器，可以定位level層級和移動地圖方位.

·         GSmallMapControl – 一個小的控制地圖明細層級的控制器，可以放大縮小也可以移動方位，但不能指定level層級，只能一級一級增加層級或者減少層級

·         GSmallZoomControl – 可以控制地圖詳細資訊層級，但只能一級一級改變

·         GScaleControl – 可以顯示出地圖的比例

·         GMapTypeControl – 可以控制地圖類型

·         GHierarchicalMapTypeControl - 可以給地圖類型指定下拉式功能表.

·         GOverviewMapControl – 可摺疊的縮小圈

2.4 載入地圖類型

 

2.4.1 地圖類型

·         G_NORMAL_MAP – 顯示預設地圖

·         G_SATELLITE_MAP – 顯示衛星地圖

·         G_HYBRID_MAP – 顯示混合地圖

·         G_PHYSICAL_MAP- 顯示地形地圖

Ps: 所介紹的Cotrol 都是引用map.google.com，若在ditu.google.com或ditu.google.cn無效，可能還未得到支援。

      2.4.2 載入地圖類型

gmap.addMapType(G_PHYSICAL_MAP);

    2.4.3 載入地圖的預設類型

gmap.setMapType(G_PHYSICAL_MAP);

 

     
   3. 建立經緯度

        New GLatLng(lat,lng);

 例如：

var myGeographicCoordinates = new GLatLng(myLatitude, myLongitude)

 
   4. 建立marker
    
      marker是用來標記在地圖上的。函數GMarker(new Gpoint(lat,lng));

var marker = new GMarker(point);//建立marker

   5  資訊視窗
  

 openInfoWindow(Gpoint,document.createTextNode(text));

 openInfoWindowHtml(Gpoint,document.createTextNode(text));

  6  監聽事件
  
   GEvent.addListener(響應的容器，響應的事件，函數)

   例如：

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

      marker.openInfoWindowHtml(''hello"); 

     }); 

        
ps: 官方文檔 http://code.google.com/intl/zh-CN/apis/maps/documentation/events.html