Head First HTML5 Chapter 5 实现HTML位置感应！！地理定位

终于来到第五章了，这里将学习怎么调用谷歌地球的API，在HTML5中实现地理定位。

This is so freakin' exciting!!!!

终于来了。

前面几章还好有面向对象的经验，所以看起来并不是很痛苦，很快就看完了。javascript的函数有很多。

先学习怎么用，拿来主义是坐标。

好了，开始辉煌的第五章了。开始实现HTML位置感知！！！

-----------------------------02：15 A.M.-----------------------------------------

Google Maps API 是Google 提供的一个javascript 库，与需你访问所有google maps功能。

HTML5中地理定位API和Google Maps API是完全不同的API。

Google Maps 的API可以快捷一点实现用户的位置。

几乎所有的浏览器都支持位置定位。

好了，先用HTML5内部的。

上代码了。

myLocation.html

myLoc.css

myLoc.js

1. myLocation.html

 1 <!--
 2 To change this template, choose Tools | Templates
 3 and open the template in the editor.
 4 -->
 5 <!DOCTYPE html>
 6 <html>
 7     <head>
 8         <title></title>
 9         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
10         <script src="myLoc.js"></script>
11         <link rel="stylesheet" href="myLoc.css">
12     </head>
13     <body>
14         <div id= "myLocation">
15             Your location will go here.
16         </div>
17     </body>
18 </html>

2.myLoc.js

 1 /* 
 2  * To change this template, choose Tools | Templates
 3  * and open the template in the editor.
 4  */
 5 window.onload = getMyLocation;
 6 
 7 function getMyLocation(){
 8     if(navigator.geolocation){
 9         navigator.geolocation.getCurrentPosition(displayLocation);
10     }else{
11         alert("Opps, no geolocation support!");
12     }
13 }
14 
15 function displayLocation(position){
16     var latitude = position.coords.latitude;
17     var longitude = position.coords.longitude;
18     var div = document.getElementById("myLocation");
19     div.innerHTML = "You are at Latitude: "+ latitude + " ,Longitude: " + longitude;
20 
21 
22 }

3.myLoc.css

 1 /*
 2  * myLoc.css
 3  *
 4 */
 5 
 6 body {
 7     font-family: Arial, Helvetica, sans-serif;
 8     margin: 10px;
 9 }
10 form, div#location, div#distance {
11     padding: 5px;
12 }
13 
14 div#map {
15     margin: 5px;
16     width: 400px;
17     height: 400px;
18     border: 1px solid black;
19 }
20 
21 
22 /*
23  * Use this CSS to make the map full screen
24  *
25 
26 html, body, div#map {
27     width: 100%;
28     height: 100%;
29     margin: 0px;
30 }
31 
32 form {
33     position: absolute;
34     top: 40px;
35     right: 10px;
36     z-index: 2;
37 }
38 
39 div#location, div#distance {
40     display: none;
41 }
42  */

浏览器显示效果如下：

第一次执行，需要统一分享地理位置。浏览器会通知你。

同意后，会显示你的地理位置

就是这样的。

HTML5里面的应用真的很好啊。哈哈～

还有很多关于诊断地理位置错误信息的内容在本书的Page 177.

有现成的代码可以使用。

—————————————————————————————03：33 Ａ．Ｍ。-----------------------------------------------------------

下面是找出地理位置的秘密部分。

可以通过一些现成的代码，找到两个地点之间的距离。

这里我们仅需要更新一下

myLocation.html

myLoc.js (其内增加一些成品ｊｓ函数)

myLocation.html

 1 <!--
 2 To change this template, choose Tools | Templates
 3 and open the template in the editor.
 4 -->
 5 <!DOCTYPE html>
 6 <html>
 7     <head>
 8         <title></title>
 9         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
10         <script src="myLoc.js"></script>
11         <link rel="stylesheet" href="myLoc.css">
12     </head>
13     <body>
14         <div id= "myLocation">
15             Your location will go here.
16         </div>
17         <div id= "distance">
18             Distance from Silicon Valley will go here.
19         </div>
20     </body>
21 </html>

myLoc.js

 1 /* myLoc.js */
 2 
 3 var ourCoords =  {
 4     latitude: 37.37,
 5     longitude: -122.04
 6 };
 7 
 8 window.onload = getMyLocation;
 9 
10 function getMyLocation() {
11     if (navigator.geolocation) {
12 
13         navigator.geolocation.getCurrentPosition(
14             displayLocation, 
15             displayError);
16     }
17     else {
18         alert("Oops, no geolocation support");
19     }
20 }
21 
22 function displayLocation(position) {
23     var latitude = position.coords.latitude;
24     var longitude = position.coords.longitude;
25 
26     var div = document.getElementById("myLocation");
27     div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
28 
29     var km = computeDistance(position.coords, ourCoords);
30     var distance = document.getElementById("distance");
31     distance.innerHTML = "You are " + km + " km from Silicon Valley";
32 
33 }
34 
35 
36 // --------------------- Ready Bake ------------------
37 //
38 // Uses the Spherical Law of Cosines to find the distance
39 // between two lat/long points
40 //
41 function computeDistance(startCoords, destCoords) {
42     var startLatRads = degreesToRadians(startCoords.latitude);
43     var startLongRads = degreesToRadians(startCoords.longitude);
44     var destLatRads = degreesToRadians(destCoords.latitude);
45     var destLongRads = degreesToRadians(destCoords.longitude);
46 
47     var Radius = 6371; // radius of the Earth in km
48     var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) + 
49                     Math.cos(startLatRads) * Math.cos(destLatRads) *
50                     Math.cos(startLongRads - destLongRads)) * Radius;
51 
52     return distance;
53 }
54 
55 function degreesToRadians(degrees) {
56     radians = (degrees * Math.PI)/180;
57     return radians;
58 }
59 
60 // ------------------ End Ready Bake -----------------
61 
62 
63 function displayError(error) {
64     var errorTypes = {
65         0: "Unknown error",
66         1: "Permission denied",
67         2: "Position is not available",
68         3: "Request timeout"
69     };
70     var errorMessage = errorTypes[error.code];
71     if (error.code == 0 || error.code == 2) {
72         errorMessage = errorMessage + " " + error.message;
73     }
74     var div = document.getElementById("location");
75     div.innerHTML = errorMessage;
76 }

上面的myLoc.js里面增加了关于ＨＴＭＬ5定位错误的输出。详情在书本的Ｐａｇｅ177.

这个是测量自己位置到指定位置的一个展示。

从这里到silicon valley，硅谷的距离是：

-----------------------------------------04：21 A.M. -------------------------------------------------------------

下面我们将加入Google Maps API，看到实际确定的地图！！！！

多么激动人心，终于到来了！！！

利用的google Maps API

一定要加入这个在<head></head>里面年

不要写错了。

下面修改一下myLocation.html文件

增加一个<div>标签，用来呈放地图

 1 <!--
 2 To change this template, choose Tools | Templates
 3 and open the template in the editor.
 4 -->
 5 <!DOCTYPE html>
 6 <html>
 7     <head>
 8         <title></title>
 9         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
10         <script src="myLoc.js"></script>
11         <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
12         <link rel="stylesheet" href="myLoc.css">
13     </head>
14     <body>
15         <div id= "myLocation">
16             Your location will go here.
17         </div>
18         <div id= "distance">
19             Distance from Silicon Valley will go here.
20         </div>
21         <div id="map">
22         </div>
23     </body>
24 </html>

修改后，加入showMap()函数的，

myLoc.js

是利用google 内部提供的方法，直接写在制定的<div>标签内的。

  1 /* myLoc.js */
  2 
  3 var ourCoords =  {
  4     latitude: 37.37,
  5     longitude: -122.04
  6 };
  7 
  8 window.onload = getMyLocation;
  9 
 10 function getMyLocation() {
 11     if (navigator.geolocation) {
 12 
 13         navigator.geolocation.getCurrentPosition(
 14             displayLocation, 
 15             displayError);
 16     }
 17     else {
 18         alert("Oops, no geolocation support");
 19     }
 20 }
 21 
 22 function displayLocation(position) {
 23     var latitude = position.coords.latitude;
 24     var longitude = position.coords.longitude;
 25 
 26     var div = document.getElementById("myLocation");
 27     div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
 28 
 29     var km = computeDistance(position.coords, ourCoords);
 30     var distance = document.getElementById("distance");
 31     distance.innerHTML = "You are " + km + " km from Silicon Valley";
 32 
 33     showMap(position.coords);        //using google Maps API to show map in div
 34 
 35 }
 36 
 37 
 38 // --------------------- Ready Bake ------------------
 39 //
 40 // Uses the Spherical Law of Cosines to find the distance
 41 // between two lat/long points
 42 //
 43 function computeDistance(startCoords, destCoords) {
 44     var startLatRads = degreesToRadians(startCoords.latitude);
 45     var startLongRads = degreesToRadians(startCoords.longitude);
 46     var destLatRads = degreesToRadians(destCoords.latitude);
 47     var destLongRads = degreesToRadians(destCoords.longitude);
 48 
 49     var Radius = 6371; // radius of the Earth in km
 50     var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) + 
 51                     Math.cos(startLatRads) * Math.cos(destLatRads) *
 52                     Math.cos(startLongRads - destLongRads)) * Radius;
 53 
 54     return distance;
 55 }
 56 
 57 function degreesToRadians(degrees) {
 58     radians = (degrees * Math.PI)/180;
 59     return radians;
 60 }
 61 
 62 //function showMap(coords){
 63 //    var googleLatAndLon = new google.maps.LatLng(coords.latitude, coords.longitude);
 64 //    var mapOptions = {
 65 //        zoom: 10,
 66 //        center: googleLatAndLon,
 67 //        mapTypeID: google.maps.MapTypeId.ROADMAP
 68 //    };
 69 //    var mapDiv = document.getElementById("map");
 70 //    map = new google.maps.Map(mapDiv, mapOptions);    //using google methods to write into mapDiv instead of .innerHTML
 71 //}
 72 
 73 function showMap(coords) {
 74     var googleLatAndLong = new google.maps.LatLng(coords.latitude, coords.longitude);
 75     var mapOptions = {
 76         zoom: 10,                     // 缩放比例，一般10左右就是一个城市的大小（0～21）范围。
 77         center: googleLatAndLong, //起始的位置
 78         mapTypeId: google.maps.MapTypeId.ROADMAP   //这里可以将ROADMAP变成HYBRID,就是卫星图了
 79     };
 80     var mapDiv = document.getElementById("map");
 81     map = new google.maps.Map(mapDiv, mapOptions);  //直接使用的谷歌地图内部的方法写到标签内，按照一定方法
 82 }
 83 
 84 
 85 // ------------------ End Ready Bake -----------------
 86 
 87 
 88 function displayError(error) {
 89     var errorTypes = {
 90         0: "Unknown error",
 91         1: "Permission denied",
 92         2: "Position is not available",
 93         3: "Request timeout"
 94     };
 95     var errorMessage = errorTypes[error.code];
 96     if (error.code == 0 || error.code == 2) {
 97         errorMessage = errorMessage + " " + error.message;
 98     }
 99     var div = document.getElementById("location");
100     div.innerHTML = errorMessage;
101 }

显示效果如下：

换成HYBRID后，我们直接看到的将是：

还算好用。

下面讲新写一篇博客，详细记述google Maps的一些功能。

:-)

已经在

Page 184

-----------------------------------05:09 A.M.--------------------------------------------------------------------

posted @ 2013-04-02 02:59 spaceship9 阅读(626) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Welcome to spaceship9

This is a personal blog of spaceship9 欢迎访问其他博客 http://blog.csdn.net/spaceship20008

Head First HTML5 Chapter 5 实现HTML位置感应！！地理定位

公告