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