没有合适的资源?快使用搜索试试~ 我知道了~
第5章Google地图API开发指南.docx
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 2 浏览量
2022-07-09
18:06:55
上传
评论
收藏 222KB DOCX 举报
温馨提示
试读
36页
第5章Google地图API开发指南.docx
资源推荐
资源详情
资源评论
1
注意:为了使用中国的地图数据,需要使用来自 ditu.google.com(或 ditu.google.cn)
的 JavaScript 代码。申请 API 密钥时自动生成的代码缺省指向 maps.google.com。因此,
需要手动将其改为 ditu.google.com(或 ditu.google.cn)。
<!DOCTYPE html "-//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 地图 JavaScript API 示例</title>
<script
src="http://ditu.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.917, 116.397), 14);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
第 5 章 Google 地图 API 开发指南
Google Maps JavaScript API 允许把 Google 地图嵌入到自己的网页内。要使用这个
API,首先需要申请一个 API key(http://code.google.com/apis/maps/signup.html )。收到
API 密钥之后,即可以按照本文档中的说明开发地图应用程序。
5.1 地图基础
5.1.1 Google Maps 上的 Hello World 例子
任何 Google 地图 API 应用程序中的基础元素都是地图本身。重点讨论
GMap2
基础对
象的用法和地图操作的基础。
学习这个 API 最简单的方法就是看一个简单的例子。下面的网页显示一个 500x300 的
地图,中心位于 California,Palo Alto:
不过在上传到自己的网站 上运行之前,必须 把其中的 "&key=" 之后的授权码换成自己在
Maps API key 申请的授权码,否则看不到效果。
也需要注意五点:
1)
使用
script
标签包含地图 API JavaScript。
2)
创建名为"map_canvas"的
div
元素存放地图。
3)
编写
JavaScript
函数创建“map”对象。
4)
将地图中的中心设置为给定的地理点。
5)
从
body
标签的
onLoad
事件初始化地图对象。
下面说明了这些步骤。
1.加载 Google 地图 API
2
<div id="map_canvas" style="width: 500px; height: 300px"></div>
http://ditu.google.com/maps?file=api&v=2&key=abcdefg
网址指向包含使
用
Google 地图 API 所需所有符号和定义的 JavaScript 文件的位置。页面必须包含指向此网
址
的
script
标签,使用注册获取 API 时收到的密钥。此示例中,该密钥为“
abcdefg
”。
2.
地图 DOM 元素
要使地图在网页上显示,必须为其留出一个位置。通常通过创建名为
div
的元素并在
浏览器的文档对象模型(DOM)中获取此元素的引用执行此操作。
上述示例中,定义名为"map_canvas"的
div
,并使用样式属性设置其尺寸。地图会自
动使用容器尺寸调整自身的尺寸,除非使用构造函数中的
GMapOptions
为地图明确指定尺
寸。
3. GMap2——基本对象
表示地图的 JavaScript 类是
GMap2
类。此类的对象在页面上定义单个地图。(可以创
建此类的多个实例,每个对象将在页面上定义一个不同的地图。)使用 JavaScript
new
操
作符创建此类的一个新实例。
当创建新的地图实例时,在页面中指定一个 DOM 节点(通常是
div
元素)作为地图的
容器。HTML 节点是 JavaScript
document
对象的子节点,通过
document.getElementById()
方法获取对此元素的引用。
此代码定义一个变量(名为
map
),并将该变量分配给新的
GMap2
对象。函数
GMap2()
称为
构造函数
,其定义如下所示:
构造函数
GMap2(container,
opts?)
描述
在给定的 HTML
container
(通常是
DIV
元素)中创建新的
地图。还可以传递 类型为
GMap2Options
的可选参数
opts
。
注意:因为 JavaScript 是松散类型的语言,可以不填写构造函数的任何可选参数,此处
也未这样做。
4. 初始化地图
通过
GMap2
构造函数创建地图之后,还需要执行一个操作,即将其初始化。初始化通
过地图的
setCenter()
方法完成。
setCenter()
方法需要
GLatLng
经纬度坐标和缩放级
别
,并且调用此方法必须在对地图执行任何其它操作(包括设置地图本身的任何其它属性) 之
前。
5. 加载地图
当 HTML 页面显示时,文档对象模型(DOM)即会扩展,接收其他外部图像和脚本并将
其合并到
document
对象中。为了确保只有在完全加载页面后才将的地图放在页面上,仅
在 HTML 页面的
<body>
元素收到
onload
事件后才执行构造
GMap2
的函数。以避免出现不
可预期的行为,并可以对地图绘制的方式和时间进行更多控制。
onload
属性是事件处理程序的示例。
GUnload()
函数是设计为防止内存泄露的工具函数。
<script src="http://ditu.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript">
</script>
map.setCenter(new GLatLng(39.917, 116.397), 14);
var map = new GMap2(document.getElementById("map_canvas"));
<body onload="initialize()" onunload="GUnload()">
3
function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.917, 116.397), 14);
// 在随机位置向地图中添加 10 个标记
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
}
5.1.2 经纬度
已经有地图后还需要一种方式来引用地图的上位置。在 Google 地图 API 中,
GLatLng
对象提供了此类机制。可以构造一个
GLatLng
对象,按照制图学的惯例以(纬度,经度)
的顺序传递参数:
注意:将
地址
转换为地理点的过程称为
地址解析(
geocoding
)
。
就象它可用于轻松地引用地理点一样,它也可用于定义对象的地理边界。例如,显示整个
中国的当前地图"窗口",称为
视图
(viewport)。此视图可以通过四个角的点定义。
GLatLngBounds
对象提供此功能,使用分别表示边界框的西南角和东北角的两个
GLatLng
对象定义一个矩形区域。
示例使用
getBounds()
返回当前视图,然后在地图上这些边界内随机放置 10 个标记:
查看示例 (map-markers.html)
5.1.3 地图属性
地图包含用于了解各种情况的大量属性。例如,要了解当前视图的尺寸,请使用
GMap2
对象的
getBounds()
方法返回
GLatLngBounds
值。
每个地图还包含一个
缩放级别
,它定义当前视图的分辨率。普通地图视图中,可以使
用 0(最低缩放级别,在地图上可以看到整个世界)到 19(最高缩放级别,可以看到每个
建筑物)之间的缩放级别。缩放级别因所查看地区而异,因为地图上某些地区的数据比其它地
区更详细。
可以通过使用
GMap2
对象的
getZoom()
方法检索当前地图所使用的缩放级别。
5.1.4 地图交互
有了
GMap2
对象,就可以与之进行交互了。
GMap2
对象还提供了大量配置方法来改变
地图对象本身的行为和外观。
默认情况下,地图对象会和
http://ditu.google.com
上一样对用户的活动做出反
应。可以使用大量工具函数改变此行为。例如,函数
GMap2.disableDragging()
禁用单
击地图和将地图拖到新位置的功能。
还可以通过编程与地图交互。
GMap2
对象支持可以直接改变地图状态的大量方法。例
如,
setCenter()
、
panTo
、
zoomIn()
和
setCenter()
方法以程序方式而不是通过用户
交互在地图上操作。
var myGeographicCoordinates = new GLatLng(myLatitude, myLongitude)
4
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.917, 116.397), 14);
window.setTimeout(function() {
map.panTo(new GLatLng(39.927, 116.407));
}, 1000);
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.917, 116.397), 14);
map.openInfoWindow(map.getCenter(), document.createTextNode("Hello, world"));
以下示例显示一个地图,等两秒,然后平移到新的中心点。
panTo
方法将地图的中心
设
置在给定点。如果指定点在地图的可见部分,则地图会平稳地移动到该点,否则地图会跳到该
点。
查看示例 (map-animate.html)
可以通过使用地图 API 事件进行更复杂的交互。
5.1.5 信息窗口
Google
地图
API
中的每个地图可以显示类型为
GInfoWindow
的单个“信息窗口”,它在
地图上方的浮动窗口中显示 HTML 内容。信息窗口的外观有点象漫画书上表示人谈话的气球状标
识符;一个内容区域和锥形的箭头,箭头指向地图上的给定点。可以通过单击 Google 地图上
的标记而看到活动的信息窗口。
GInfoWindow
对象没有构造函数。当创建地图时,会有一个信息窗口自动创建并与地
图关联。对给定的地图,一次不能显示多个信息窗口,但可以移动信息窗口并更改其内容(如果需
要)。
GMap2
对象提供了一个
openInfoWindow()
方法,它取一个点和一个 HTML DOM 元
素作为参数。HTML DOM 元素追加到信息窗口容器中,信息窗口的头固定在给定点上。
GMap2
的
openInfoWindowHtml()
方法类似,但它取一个 HTML 字符串而不是 DOM 元素
作为第二个参数。
要创建信息窗口,请调用
openInfoWindow
方法,并向其传递要显示的位置和 DOM
元素。以下示例代码显示固定到地图中心并显示简单的“Hello,world”消息的信息窗口。
查看示例 (map-infowindow.html)
5.2 事件
5.2.1 地图事件概述
浏览器中的 JavaScript 是
事件驱动
的,意味着 JavaScript 通过生成事件来响应交互,
并用程序来
侦听
有趣的事件。例如,在浏览器中,用户鼠标和键盘交互会创建在DOM 内传
播的事件。对某些事件感兴趣的程序将为这些事件注册 JavaScript 事件侦听器,并在收到
这些事件时执行代码。
Google 地 图 API 通过为地图 API 对象定义定制事件而成为这种事件模型的一部分。注
意地图 API 事件与标准 DOM 事件不同。另外,由于不同的浏览器支持不同的 DOM 事件模
型,地图 API 还提供侦听和响应这些 DOM 事件而无需处理各种跨浏览器特性的机制。
5.2.2 事件侦听器
处理 Google 地 图API中的事件的方式是使用
GEvent
名称空间中的工具函数注册事件
侦听器。每个地图
API
对象都导出了多个命名事件。例如,
GMap2
对象导出
click
、
dblclick
5
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(39.917,116.397), 14);
GEvent.addListener(map, "click", function() {
alert("您点击了地图。");
});
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GlatLng(39.917,116.397), 14);
GEvent.addListener(map, "zoomend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = "缩放级别为:" + map.getZoom();
});
和
move
事件,以及许多其他事件。每个事件都在给定环境下发生,并且可以传递标识该环
境的参数。例如,当用户在地图对象中移动鼠标时,会触发
mousemove
事件,并传递鼠标
所在地理位置的
GLatLng
。
要注册以获取这些事件相关的通知,使用静态方法
GEvent.addListener()
。该方法
的参数为待侦听对象、待侦听事件以及回调函数。例如,在以下代码片段中,每次用户单击地
图都会时出现警告。
查看示例 (event-simple.html)
侦听器也能够捕获事件的环境。在以下示例代码中,显示用户缩放地图后地图的缩放级
别。
查看示例 (event-context.html)
5.2.3 在事件侦听器中使用 closures
当执行事件侦听器时,通常较好的做法是同时将私有数据和持久数据与一个对象关联。
JavaScript 不支持“私有”实例数据,但它支持允许内部函数访问外部变量的 closures。在事
件侦听器中要访问通常与事件发生相关对象不关联的变量时,closures 非常有用。
以下示例在事件侦听器中使用 closures 将一个秘密消息分配给一组标记(Marker)。
单击任何标记将可以查看秘密消息的一部分,秘密消息并不包含在标记本身内。
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new Glatlng(39.917,116.397), 14);
// 在给定点创建标记
// 五个标记在单击时显示秘密消息,但该消息不在标记的实例数据中
function createMarker(point, number) {
var marker = new GMarker(point);
var message = ["这","是","个","秘密","消息"];
marker.value = number;
GEvent.addListener(marker, "click", function() {
var myHtml = "<b>#" + number + "</b><br/>" + message[number -1];
map.openInfoWindowHtml(point, myHtml);
});
return marker;
}
// 在地图的随机位置添加 5 个标记
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 5; i++) {
剩余35页未读,继续阅读
资源评论
Cheng-Dashi
- 粉丝: 108
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功