思洋互动网站建设学前班

JavaScript文件

JavaScript是例子页面上展示的API背后的引擎，Geolocation API是通过调用initGeoApp()函数来初始化的，这就是由< body>标签中的onLoad()事件来执行的函数：其决定了你的浏览器是否能够使用地理位置数据（参见清单6）。如果你的浏览器可以使用地理位置数据的话，则Geolocation API就会被调用。如果调用成功的话，就会使用Position中的属性值来绘制地图，然后属性的值会接在地图的后面打印出来。
广州网站建设,网站建设,广州网页设计,广州网站设计

清单6. Geolocation的函数

1. function initGeoApp()  
2. {  
3. if( navigator.geolocation )  
4. {   
5. navigator.geolocation.getCurrentPosition( success, failure);  
6. }  
7. else  
8. {  
9. alert("Your browser does not support geolocation services.");  
10. }  
11. } 

基于你在HTML文件中提供的ID，document.getElementById被用来检索值。document.getElementById是文档对象的一个方法，应该通过使用document.getElementById来访问，如清单7所示。Position的属性值存放在这里，这样它们就能够用来在要渲染的地图下面打印属性。

清单7. 使用getElementById来获取coords的值

1. var map;  
2. function success(position)  
3. {  
4. document.getElementById("accuracyOutput").innerHTML =   
5. position.coords.accuracy;  
6. document.getElementById("altitudeOutput").innerHTML =   
7. position.coords.aktitude;  
8. document.getElementById("altitudeAccuracyOutput").innerHTML =   
9. position.coords.altitudeAccuracy;  
10. document.getElementById("headingOutput").innerHTML =   
11. position.coords.heading;  
12. document.getElementById("latitudeOutput").innerHTML =   
13. position.coords.latitude;  
14. document.getElementById("longitudeOutput").innerHTML =   
15. position.coords.longitude;  
16. document.getElementById("speedOutput").innerHTML =   
17. position.coords.speed; 

接下来的这部分定义的是Google Map API的LatLng对象的坐标，如清单8所示。Google Map API LatLng对象提供了需要用来创建地图的坐标信息，你可以设置缩放级别和其他的几个选项，这些选项创建了呈现给用户的地图的外观。

清单8. Google Map的选项

1. var coordinates = new google.maps.LatLng(position.coords.latitude,   
2. position.coords.longitude);  
3.  
4. var myOptions =  
5. {  
6. zoom: 14,  
7. center: coordinates,  
8. mapTypeControl: false,  
9. navigationControlOptions: {style: google.maps.NavigationControlStyle.small},  
10. mapTypeId: google.maps.MapTypeId.ROADMAP   
11. }; 

注意一下mapTypeID这一选项，该选项选择的是ROADMAP，该值所呈现的地图的样子如图2所示。该选项有四个可选的值：

1. ROADMAP

2. HYBRID

3. SATELLITE

4. TERRAIN

图3给出了选择HYBRID选项时网页看起来的样子。

图3. 使用混合式地图的API网页。
广州网站建设,网站建设,广州网页设计,广州网站设计

map_canvas这一ID被用来创建地图，该ID是HTML文件中的< div>的ID。

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 在地图上放一个初始位置的标记，清单9给出了这一代码。

清单9. 放置一个初始的地图标记

1. var marker = new google.maps.Marker({  
2. position: coordinates,  
3. map: map,  
4. title: "You are here."  
5. });  
6. }  
7.  
8. function failure()  
9. {  
10. alert("Sorry, could not obtain location");  
11. } 

web worker在页面初始化之后就开始执行。如果用户想要显示所执行的计算的输出的话，他/她可以点击Display Web Worker按钮，这将会调用displayWorker()函数。清单10给出了它的代码。

清单10. web worker

1. var worker = new Worker('PrimeNumberWebWorker.js');  
2. function displayWorker()   
3. {  
4. worker.onmessage = function (event)   
5. {   
6. document.getElementById('result').innerHTML = event.data;  
7. };  
8. } 

如果用户想要停止web worker的话，他/她可以点击Stop Web Worker按钮，这会调用清单11中给出的stopWorker()函数。

清单11. 终止worker

1. function stopWorker()   
2. {  
3. worker.terminate();  
4. } 

web worker文件

该文件是素数计算器的web worker，其计算出每个素数直到被终止执行。清单12给出了它的代码。

清单12. 计算素数

1. var n = 1;  
2. search: while (true) {  
3. n += 1;  
4. for (var i = 2; i <= Math.sqrt(n); i += 1)  
5. if (n % i == 0)  
6. continue search;  
7. postMessage(n);  
8. }  

CSS3文件

清单13中给出的CSS3文件提供了HTML5页面中显示的格式。

清单13. CSS3描述

1. * {font-family: Arial,Helvetica,sans-serif ;  
2. }  
3.  
4. body {  
5. margin: 0 300px 0 300px;  
6. color: #990000;  
7. background-color:#FFFFCC;  
8. }  
9.  
10. header > hgroup h1 {  
11. margin: 0 0 3px 0;  
12. padding: 0;  
13. text-align: center;  
14. font-size: 30px;  
15. }  
16.  
17.  
18. header > hgroup h2 {  
19. margin: 0 0 15px 0;  
20. padding: 0;  
21. text-align: center;  
22. font-style: italic;  
23. font-size: 12px;  
24. }  
25.  
26.  
27. header p {  
28. margin: 0 0 20px 0 ;  
29. padding: 0;  
30. text-align: center;  
31. font-size: 12px;  
32. }  
33.  
34. aside {  
35. width: 200px;  
36. height: 175px;  
37. margin: -450px 0 0 450px;  
38. background-color: #990000;  
39. padding: .5px 0 0 10px ;   
40. color:#FFFFFF;  
41. font-weight:bold;  
42. }  
43.  
44. div {  
45. width: 400px;   
46. height: 250px;   
47. } 

结论

文章系列的这一部分内容研究了Geolocation和Web Worker API的实用性。选择这两个API是因为把它们放在一起既说明了API使用的创新性又说明了实际上的可用性。对于HTML5规范在创建新的业务模型方面的使用来说，Geolocation是一个很好的例子。同样，Web Worker的角色是JavaScript的并发性所固有的一些问题的解决方案。

这两个API共同说明了一种用于商业和社会的HTML5使用模式的组合，因此，它们的功效说明了HTML5富互联网应用的特有便利性和一般管理手段。