Google Maps API

Report
Google Maps API
提供的服务体验演示
及简单开发流程
目录
• Google Maps API 简介
• Goolge Maps API的开发环境
• 服务体验及简单开发技术
• 总结
Google Maps API简介
简介
API:
(Application Programming Interface,应用
程序编程接口)就是一些预先定义的函数 ,调用
这些函数可以完成相应的功能。
Google Maps API:
一种通过 JavaScript 语言调用其提供的函数将
Google 地图嵌入到网页中并进行操作的一种API。
它提供了很多处理地图的功能和向地图添加内容的服
务,让您能够在您的网站上创建功能全面的地图应用。
Goolge Maps API
的开发环境
开发环境
开发语言:HTML、JavaScript
1、HTML:
(超文本标记语言)
是一种用来制作超
文本文档的简单标
记语言,用来生成
WWW网页。
代码格式:
<HTML>
<HEAD>
<TITLE>
hello world!
</TITLE>
</HEAD>
<BODY>
hello world!
</BODY>
</HTML>
开发环境
2、JavaScript:
JavaScript 允许页面制作者在HTML
文件中嵌入函数命令。当页面调入浏览器时,
JavaScript 命令将被执行,并完成相应的
功能。
要使用JavaScript语言只需要在HTML语言中
加入下列代码即可:
<script type="application/javascript">
<!-代码内容
-->
</script>
开发环境
开发工具:
1、用NotePad编写
直接使用记事本(NotePad)编写
HTML语言,并嵌入JavaScript语言,最
后将文件保存为 .htm格式即可 。
运行时用浏览器打开即可。
开发环境
2、 使用软件Aptana编写
Aptana是一款可以识别HTML语言和
JavaScript的工具,它提供强大的代码提示、浏
览器兼容性提示、错误提示、代码自动完成、测
试等功能
开发环境
工作界面如下:
服务体验
及简单开发技术
服务及开发
开发准备工作:
1、API Key !
使用Google Maps API之前,需要向
http://www.google.com/apis/maps/signup.htm
申请一组API KEY,当申请到API KEY之后,就可以使用
Google Maps API提供的函数来设计地图了。
服务及开发
使用方法:
<script
src="http://maps.google.com/maps?file=api&amp;v=2&
amp;key=ABQIAAAA1j86tnUDFv8OAtC8dZVtKRT2yXp_
ZAY8_ufC3CFXhHIE1NvwkxSzmwrQ90SNUILzGRpsBiaa
860gfQ"
type="text/javascript">
</script>
分析:
“src=”表示连接到的API地址”;
key=”表示上文中提到的密钥,
有了这两行代码,即可把Google Maps 嵌入到自己的网页中
了。
服务及开发
2、常用的几个方法:
• map = new GMap2(document.getElementById("map"));
析:刚才src连接网页中下载的Google Maps下载到id为
“map” 的DIV元素中。
• map.setCenter(new GLatLng(39.92, 116.46), 4);
析:设置Map的中心,调用GlatLng函数,设置中心为
(39.92,116.46),放大系数为4。
• map.addControl( new GMapTypeControl() );
析:在地图的右上方加上三个按钮,分别表示普通图(即
交通图),卫星图,两者合成图。
• map.addControl( new GLargeMapControl() );
析:加一个大控制面板,即控制地图的缩放级别。
服务及开发
实例分析:
1、改变背景色及夜景
代码分析:
G_NORMAL_MAP.getTileLa
yers()[0].getOpacity=functi
on()
{
return 0.4;
};//设置透明度;
map.getContainer().style.
backgroundColor=”#BBoo
oo” ;
//设置颜色类型,本例
为红色;
服务及开发
夜景:
代码分析:
Var nightMap = new
GMapType(tilelayers,
New GMercatorProjection(12),
“Night”,
{errorMessage:”数据不可
用”} );
//设置夜景变量,使用的
是墨卡托投影技术,若出错,则
显示“数据不可用”。
Map.addMapType(nightMap);//
添加地图类型为夜景;
Map.addControl(nightMap);//
添加夜景按钮;
服务及开发
2、设计旅行路线,显示城市信息
效
果
图
代码分析
服务及开发
拓展分析:
当地图的信息比较少时,可以直接把地图的
信息嵌套在代码中,但是当我们所提供的信息太
多时,一次全部加载就会使地图显得杂乱无章,
并且当地图局部更新时,也会使地图全部刷新,
使Google Maps API与Ajax整合在一起就可以解
决这个问题,下面介绍一下Ajax技术。
服务及开发
Ajax技术简单分析:
1、首先要先建立或者下载一个包含地图信息的
XML文件;
2、在JavaScript语言中调用XMLOverlayInfo()
函数,通过这个函数去分析文件内容,并将XML
文件中内容转换成Google Maps API 可以识别
的对象,并将信息显示在地图上。
服务及开发
3、利用Ajax技术根据经纬度查找地点信息
服务及开发
先建立一个文件,本实例中为Google Maps
JavaScript API Example Reverse Geocoder.files文
件中的 maps;此即相当于XML文件,此文件夹中的地图
信息都是从Google Maps 数据库中连接,下载的。
在代码中加入<SCRIPT src="Google Maps JavaScript
API Example Reverse Geocoder.files/maps"
type=text/javascript>
析:此过程表示的JavaScrpt脚本放在Google Maps
JavaScript API Example Reverse Geocoder.files文件夹中的
maps文件中,即把各种地图信息载入到代码中。
具体代码分析
总结:
地图通常代表着我们周围的信息,跟我们
的生活有密切的关系,在网上将地图与信息整
合,有助于我们凝聚对于同一区域的感情。
Google Maps 真正的魅力除了丰富完整的地
图功能外,还提供了API程序库让所有感兴趣的人
一起参与使用,分享自己的信息,并加入自己的
创意以创造不同的地图服务。
小组人员:
• 张兆安 1071000135
• 张家越 1071000134
• 周昉石 1071000136
• 郝 铭
1071000145
• 贺静文 1071000146
• 王 洋
1071000160

similar documents