双击代码全选
|
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
|
<section>
<p>This is the geolocation example map.</p>
<div id="map_canvas" ></div>
<p>This is the output from the navigator.geolocation object.</p>
<table>
<tr>
<td>accuracy:</td>
<td><span id="accuracyOutput"></span></td>
</tr>
<tr>
<td>altitude:</td>
<td><span id="altitudeOutput"></span></td>
</tr>
<tr>
<td>altitudeAccuracy:</td>
<td><span id="altitudeAccuracyOutput"></span></td>
</tr>
<tr>
<td>heading:</td>
<td><span id="headingOutput"></span></td>
</tr>
<tr>
<td>latitude:</td>
<td><span id="latitudeOutput"></span></td>
</tr>
<tr>
<td>longitude:</td>
<td><span id="longitudeOutput"></span></td>
</tr>
<tr>
<td>speed:</td>
<td><span id="speedOutput"></span></td>
</tr>
</table>
</section>
<aside>
<p>This is the Web Worker. </p>
<p>Prime number calculation result:
<output id="result"></output></p>
|
Web Worker 会计算质数。您可以使用新的
<output> 标签来显示 Web Worker 得到的计算结果。
<output> 标签的 ID 与 JavaScript 用于确定它所执行计算的 ID 是相同的。DOM 是使用标签
<span> 和
<output> ID 来访问它们的。如果没有引用 ID，那么 JavaScript 将不知道应该使用
<span> 或是
<output>。清单 4 显示了 Web Worker 的输出结果。
清单 4. Web Worker 输出
双击代码全选
|
1
2
3
4
|
<aside>
<p>This is the Web Worker. </p>
<p>Prime number calculation result:
<output id="result"></output></p>
|
标签
<input> 的第一个
onClick 用于显示质数 Web Worker 计算得到的值，然后第二个
onClick 会停止这个 Web Worker。清单 5 显示了它们的代码。
displayWorker() 会在单击按钮时显示 Web Worker 的计算结果。 Web Worker 会在页面加载时开始计算质数。
清单 5. Web Worker 的输入
双击代码全选
|
1
2
3
4
5
6
|
<input type="button" value="Display Web Worker" onClick="displayWorker();">
<input type="button" value="Stop Web Worker" onClick="stopWorker();">
</aside>
</body>
</html>
|
JavaScript 文件
JavaScript 是示例页面所展示的 API 执行引擎。Geolocation API 是使用
initGeoApp() 函数初始化的。这个函数是在 标签
<body> 的
onLoad() 事件中执行的。它决定了您的浏览器是否支持 Geolocation（见清单 6）。如果您的浏览器支持 Geolocation，那么它就会调用 Geolocation API。如果成功执行，那么一幅地图就会根据
Position 属性绘制出来。然后，这些属性的值会打印在地图下方。
清单 6. Geolocation 函数
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
|
function initGeoApp()
{
if( navigator.geolocation )
{
navigator.geolocation.getCurrentPosition( success, failure);
}
else
{
alert("Your browser does not support geolocation services.");
}
}
|
这些值是使用
document.getElementById 获取的，它会使用您在 HTML 文件中指定的 ID 来获取。
document.getElementById 是 document 对象的方法，并且应该通过
document.getElementById 进行访问，如清单 7 所示。
Position 属性的值会被存储，这样它们就可以在所渲染地图下方打印这些属性。
清单 7. 使用 getElementById 获得坐标值
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
var map;
function success(position)
{
document.getElementById("accuracyOutput").innerHTML =
position.coords.accuracy;
document.getElementById("altitudeOutput").innerHTML =
position.coords.aktitude;
document.getElementById("altitudeAccuracyOutput").innerHTML =
position.coords.altitudeAccuracy;
document.getElementById("headingOutput").innerHTML =
position.coords.heading;
document.getElementById("latitudeOutput").innerHTML =
position.coords.latitude;
document.getElementById("longitudeOutput").innerHTML =
position.coords.longitude;
document.getElementById("speedOutput").innerHTML =
position.coords.speed;
|
这个部分定义了 Google Map API 的
LatLng 对象的坐标，如清单 8 所示。Google Map API 的
LatLng 对象提供了创建地图所需要的坐标信息。您可以设置缩放级别和其他一些创建地图外观并呈现给用户的选项。
(责任编辑：12图资源库)
