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 加载地图

    bodyonload事件中加载,当然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.comditu.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


   
信息窗口
  

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

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


  监听事件
  
   GEvent.addListener(
响应的容器,响应的事件,函数)

   
例如:

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

      marker.openInfoWindowHtml(''hello"); 

     }); 


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