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