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.csdn.net/dany_zj/archive/2006/09/20/1253523.aspx(自己翻译的中文版)
API中的坐标:在GMaps 中一个位置使用2个浮点数确定,他们代表经度和纬度(度数经过转换成数字), 另外还有个深度值来表示坐标所在地图中的所放级数(范围大致为1~19, 只有个别城市能达到最大深度).
2. 申请 GMap API Key
PS: 申请需要一个小前提, 你需要有Google帐户. 不用担心, 他没有申请个数的限制(起码现在没有).
3. 创建第一个GMaps
下面我们创建一个GMaps,包含一个地图控制器和地图模式控制器。
"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&v=2&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 事件获取事件发生时改点的坐标, 我们直接使用这个.
"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&v=2&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 >