Google Maps API

Transcript Google Maps API

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&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

Google Maps API

Transcript Google Maps API

Directory