Google Maps 开发指南

 Google Maps 开发指南

前言

Google Maps 是 google 公司推出的一款网上地图工具，通过AJAX技术实现无刷新、可拖动、高性能的网页程序。

使用GMaps

1. 关键字 

Google Maps 的网站：http://maps.google.com/ (英文)
暂时还没有中文的,地图方面卫星图象精度在北美(美国和加拿大)方面比较高.

Google Maps API：http://www.google.com/apis/maps/ (英文,在这里可以申请到 API KEY)
GMap API Key是每个GMap 程序都要有的, 他与网站域名关联, 申请时输入网站域名(多域名的网站处理起来可要麻烦点了).假如你的GMaps没有API KEY 者显示一个提示框.
PS: 请注意他的协议. 这里我就不重复了.

Google Maps API Document(V2)：http://www.google.com/apis/maps/documentation/
这个是Google公司公布的开发文档. 开发前需要阅读.
PS: http://blog.youkuaiyun.com/dany_zj/archive/2006/09/20/1253523.aspx(自己翻译的中文版)

API中的坐标：在GMaps 中一个位置使用2个浮点数确定,他们代表经度和纬度(度数经过转换成数字), 另外还有个深度值来表示坐标所在地图中的所放级数(范围大致为1~19, 只有个别城市能达到最大深度).

 

 

2. 申请 GMap API Key

访问  http://www.google.com/apis/maps/signup.html 阅读协议,填写你的网站地址就可以申请到API KEY了,
PS: 申请需要一个小前提, 你需要有Google帐户. 不用担心, 他没有申请个数的限制(起码现在没有).

 

3. 创建第一个GMaps

下面我们创建一个GMaps，包含一个地图控制器和地图模式控制器。

<! 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" >
< head >
< meta  http-equiv ="content-type"  content ="text/html; charset=utf-8" />
< title > Google Maps JavaScript API Example </ title >
<!--
下面的 Script 加载了GMap API
此出必须在所有的应用前加载，否则可能会出现隐含错误
使用你自己的API Key替换掉 key=abcdefg 中的 abcdefg
PS:GMaps 兼容大部分浏览器 可以在使用 GMaps 前, 先用 GBrowserIsCompatible() 函数检查是否支持。 
-->
< script  src ="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg"
    type ="text/javascript" ></ script >
< script  type ="text/javascript" > ...
// CDATA 标签说明：CDATA 是XML格式中表示文本段的，当你的网页使用 XHTML 编写时候，就需要加 CDATA 标签.
// 因为注释标签 "< ! -- " 只能注销掉部分内容, 容易导致 XML 解析器分析失败.
//<![CDATA[
// 函数:显示一个 GMAP 实例
function load() ...{
    //检查浏览器是否支持
    if (GBrowserIsCompatible()) ...{
        //声明 GMap 实例, 显示在页面中 Id 为"map" 的 DIV 元素中.
        var map = new GMap2(document.getElementById("map"));
        //添加地图控制器, 下面4个类型的地图控制器是同一类型的. 4 种类型,可选一个
        //缩小模式 
        //map.addControl(new GSmallMapControl());
        //最大模式
        map.addControl(new GLargeMapControl());
        //只有放大和缩小的模式
        //map.addControl(new GSmallZoomControl());
        //只有地图缩放控制条的模式
        //map.addControl(new GScaleControl());
        //填加地图类型控制器 允许在地图视图、卫星视图和地图卫星混合模式, 三个模式中切换
        map.addControl(new GMapTypeControl());
        //可以通过GMap2.setMapType()方法修改地图的显示模式
        //内建 3 种模式, 分别是 G_NORMAL_MAP:地图模式,G_SATELLITE_MAP:卫星模式,G_HYBRID_MAP:混合模式:
        map.setMapType(G_NORMAL_MAP);
        //地图加载后必须设置中心点, 否则将出现错误警告.
        //GLatLng(Lat,Lng) 是一个坐标, Lat:纬度,Lng:经度, 假如你使用变量请使用 Number 对象
        //这是个变量精度问题在16级深度下将可能产生超过18位小数的数字.
        map.setCenter(new GLatLng(40.714395,-74.005494), 15);
    }
}
//]]>
</ script >
</ head >
<!--
在页面加载完毕后, 显示 GMAP 实例
-->
< body  onload ="load()"  onunload ="GUnload()" >
<!--
GMaps 显示容器,需要在创建 GMaps 对象前创建
GMaps 的大小通过容器的属性获取, 修改容器的大小后需要调用 GMap2.checkResize() 使 GMaps 适应容器的大小
-->
< div  id ="map"  style ="width: 500px; height: 300px" >   </ div >
</ body >
</ html >

 4. 记录地图坐标

首先我们前面提过，GMaps 的坐标使用的是数字不是度，所以我们获取的一般也都用数字表示，当然如果你要使用度数的话，你需要自己写个转换函数来获取度数。

我们这里直接在地图上获取他的GLatLng()对象
通过click 事件获取事件发生时改点的坐标, 我们直接使用这个.

<! 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" >
< head >
< meta  http-equiv ="content-type"  content ="text/html; charset=utf-8" />
< title > Google Maps JavaScript API Example - Get click point </ title >
< script  src ="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg"
    type ="text/javascript" ></ script >
< script  type ="text/javascript" > ...
function load() ...{
    //检查浏览器是否支持
    if (GBrowserIsCompatible()) ...{
        //声明 GMap 实例, 显示在页面中 Id 为"map" 的 DIV 元素中.
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        //注册 click 事件
        GEvent.addListener(map, "click", function(marker, point) ...{
            //事件触发时将有 2 个参数传入
            //marker:地图上的标记点,假如不是点在标记点上,则此值为null
            //point:GlatLng对象,记录事件发生点的坐标,深度只能通过map.getZoom()获取
            if (marker) ...{
                //如果是标记点,输出标记点的坐标
                alert(marker.getPoint());
            } else ...{
                //假如不是标记点,在当前位置创建一个标记点
                map.addOverlay(new GMarker(point));
            }
        });
        map.setCenter(new GLatLng(40.714395,-74.005494), 15);
        GDownloadUrl("Untitled-1.html",function(text,status)...{
            alert(text);
        });
    }
}
//]]>
</ script >
</ head >
< body  onload ="load()"  onunload ="GUnload()" >
< div  id ="map"  style ="width: 960px; height: 560px" >   </ div >
</ body >
</ html >