清单 8. Google Map 选项
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var coordinates = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var myOptions =
{
zoom: 14,
center: coordinates,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.small},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
|
注意，在
mapTypeID 选项中，所选择的选项是
ROADMAP。这个值是用来表示这个地图的，所以它会按图 2 的方式显示。下面是 4 个可能值：
-
ROADMAP
-
HYBRID
-
SATELLITE
-
TERRAIN
图 3 显示了选择
HYBRID 选项时页面的显示结果。
图 3. hybrid 地图的 API 网页
使用 ID
map_canvas 创建地图，它是 HTML 文件中
<div> 的 ID：
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
在地图上放置一个初始位置标记。清单 9 显示了这样一段代码。
清单 9. 放置一个初始地图标记
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
|
var marker = new google.maps.Marker({
position: coordinates,
map: map,
title: "You are here."
});
}
function failure()
{
alert("Sorry, could not obtain location");
}
|
Web Worker 会在页面初始化后就开始执行。如果用户希望显示所执行计算的输出，他或她就可以单击
Display Web Worker，它会调用
displayWorker() 方法。清单 10 显示的就是这样一段代码。
清单 10. Web Worker
双击代码全选
|
1
2
3
4
5
6
7
8
9
|
var worker = new Worker('PrimeNumberWebWorker.js');
function displayWorker()
{
worker.onmessage = function (event)
{
document.getElementById('result').innerHTML = event.data;
};
}
|
如果用户希望停止 Web Worker，那么他或她可以单击
Stop Web Worker，它就会调用
stopWorker() 函数，如清单 11 所示。
清单 11. 终止 worker
双击代码全选
|
1
2
3
4
|
function stopWorker()
{
worker.terminate();
}
|
Web Worker 文件
这个文件就是质数计算器 Web Worker：它会计算每一个质数，直至停止。清单 12 显示了这样一段代码。
清单 12. 计算质数
双击代码全选
|
1
2
3
4
5
6
7
8
|
var n = 1;
search: while (true) {
n += 1;
for (var i = 2; i <= Math.sqrt(n); i += 1)
if (n % i == 0)
continue search;
postMessage(n);
}
|
CSS3 文件
清单 13 所示的 CSS3 文件用来格式化 HTML5 页面显示。
清单 13. CSS3 描述
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
* {font-family: Arial,Helvetica,sans-serif ;
}
body {
margin: 0 300px 0 300px;
color: #990000;
background-color:#FFFFCC;
}
header > hgroup h1 {
margin: 0 0 3px 0;
padding: 0;
text-align: center;
font-size: 30px;
}
header > hgroup h2 {
margin: 0 0 15px 0;
padding: 0;
text-align: center;
font-style: italic;
font-size: 12px;
}
header p {
margin: 0 0 20px 0 ;
padding: 0;
text-align: center;
font-size: 12px;
}
aside {
width: 200px;
height: 175px;
margin: -450px 0 0 450px;
background-color: #990000;
padding: .5px 0 0 10px ;
color:#FFFFFF;
font-weight:bold;
}
div {
width: 400px;
height: 250px;
}
|
结束语
本 期介绍 Geolocation 和 Web Worker API 的使用方法。之所以选择介绍这两个 API 是因为它们一起证明了 API 的创新和实用性。Geolocation 是 HTML5 规范中用来创建新业务模型的一个典型例子。同样地，Web Worker 的作用是用来解决 JavaScript 固有的并发问题的。
这两个 API 一起说明了 HTML5 的商业和社交用途的组合使用模式。因此，它们的实用性证明了一个 HTML5 富互联网应用程序是非常简单而全面的。
下载
|
描述 |
名字 |
大小 |
下载方法 |
|
样例 HTML、CSS3 文件 |
HTML5APIs.zip |
10KB |
HTTP |
(责任编辑：12图资源库)
