65.9K
CodeProject 正在变化。 阅读更多。
Home

12 个炫酷的 HTML5 地理定位创意

Danwei Tran Luciani
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.50/5 (5投票s)

2012 年 3 月 15 日

CPOL

6分钟阅读

viewsIcon

85723

这里有12个简单的场景，说明网站如何通过考虑用户的位置来适应用户并定制他们的体验。

了解用户的位置有助于提高您的网站质量和服务速度。过去，用户必须主动输入他们的位置并提交到网站，可以通过打字、使用长下拉列表或点击地图。现在，借助HTML5地理定位API，找到您的用户（在他们允许的情况下）比以往任何时候都更容易。图1显示了一个使用地理定位确定用户位置的网站，以纬度和经度表示。这些数字可以很容易地翻译成更容易理解的内容，例如街道名称或城市。

图1 借助地理定位显示用户位置

想象一下，如果您的网站能提供某个城市所有公共交通的在线时刻表，那将多么有用。使用地理定位，网站可以推荐最佳出行路线，以尽快将人们送到目的地。桌面用户可以按与计算机的接近程度对起始位置进行排序。深夜外出回家的移动用户可以迅速找到步行距离内最近的公交车站。这些可能性以及更多功能只需一个API即可实现。

使用地理定位API的场景

这里有12个简单的场景，说明网站如何通过考虑用户的位置来适应用户并定制他们的体验。其中一些可能看起来很明显，但小事往往能带来最大的不同。

  • 公共交通网站可以列出附近的公交车站和地铁位置。
  • 深夜外出？出租车或专车服务网站可以找到您的位置，即使您不知道。
  • 购物网站可以立即提供运费估算。
  • 旅行社可以为当前位置和季节提供更好的旅行建议。
  • 内容网站可以更准确地确定搜索查询的语言和方言。
  • 房地产网站可以显示某个区域的平均房价，当您开车查看社区或参观开放日时，这是一个方便的工具。
  • 电影院网站可以宣传附近上映的电影。
  • 在线游戏可以通过让用户在现实世界中完成任务，将现实融入游戏玩法。
  • 新闻网站可以在首页包含定制的本地头条新闻和天气。
  • 在线商店可以告知产品在当地零售商是否有库存。
  • 体育和娱乐票务网站可以宣传附近即将举行的比赛和演出。
  • 招聘信息可以自动包含潜在的通勤时间。

地理定位的工作原理

从技术上讲，PC或移动设备有多种方法可以找出自己的位置（希望与用户在同一个地方）。

  • GPS是确定定位最准确的方法，但它比其他选项的能效低，有时需要较长的启动时间。
  • A-GPS（辅助GPS）使用移动电话塔和公共基站之间的三角测量来确定位置。尽管不如GPS精确，但A-GPS足以满足许多场景。
  • 支持Wi-Fi接入点的移动设备可以使用热点来确定用户位置。
  • 没有无线设备的固定计算机可以使用已知的IP地址范围获取粗略的位置信息。

当涉及到分享用户的物理位置时，隐私是一个严重的问题。根据地理定位API，“用户代理不得在未经用户明确许可的情况下向网站发送位置信息。”换句话说，用户必须始终选择同意与网站分享位置信息。图2显示了一个典型的请求用户许可的消息。有关确保地理定位API安全性的更多信息，请参阅安全和隐私考虑。

图2 示例用户权限请求

三个简单函数

您准备好将地理定位集成到您的网站中了吗？您只需要学习三个简单的函数即可掌握整个API，该API位于geolocation对象中，它是Navigator对象的一个属性。（在此处了解有关geolocation对象的更多信息：此处。）

getCurrentPosition函数一次获取用户位置。它接受两个回调形式的参数：一个用于成功的定位查询，一个用于失败的定位查询。成功回调接受Position对象作为参数。它还可以选择接受PositionOptions对象形式的第三个参数。

1.  navigator.geolocation.getCurrentPosition(locationSuccess, locationFail);
2.   
3.   function locationSuccess(position) {
4.   
5.          latitude = position.coords.latitude;
6.   
7.          longitude = position.coords.longitude;
8.   
9.   }
10. 
11. function locationFail() {
12. 
13.       alert(‘Oops, could not find you.’);
14. 
15. }

Position对象包含图3中所示的属性。

图3 Position对象的属性
属性 值 单位
coords.latitude double 度
coords.longitude double 度
coords.altitude 双精度浮点数或空值 米
coords.accuracy double 米
coords.altitudeAccuracy 双精度浮点数或空值 米
coords.heading 双精度浮点数或空值 顺时针度数
coords.speed 双精度浮点数或空值 米/秒
时间戳 DOM时间戳 类似于Date对象

watchPosition函数会持续轮询用户位置并返回关联的ID。设备决定更新速率并将位置变化推送到服务器。

clearWatch函数停止轮询用户位置。它接受watchPosition的ID作为参数。

呈现位置数据：大地测量或民用

有两种向用户呈现位置数据的方式：大地测量和民用。大地测量位置描述方式直接指纬度和经度。民用位置数据表示形式是一种更易于人类阅读和理解的格式。

每个参数都具有大地测量表示和民用表示，如图4所示。

图4 大地测量和民用数据示例
Attribute 大地测量 民用
职位 59.3, 18.6 斯德哥尔摩
海拔 10米 4楼
标题 234度 到市中心
速度 5公里/小时 步行
Orientation 45度 东北

使用地理定位API时，您会从函数中获取大地测量数据。以原始数字呈现位置数据很少友好或有用。在线服务，例如必应地图和雅虎GeoPlanet可以帮助您在这两种呈现模式之间进行转换。

浏览器支持

Internet Explorer 9+ Firefox
3.5+		 Chrome
5+		 Opera
10.6+		 Safari
5+		 iPhone
3+		 Android
2+		 Windows Phone 7.5+
图5 支持HTML5地理定位API的浏览器

尽管地理定位在所有主流浏览器中都有效（图5），但您仍然需要考虑无法提供位置的场景。例如，用户可能正在运行较旧的浏览器，或者硬件不包含定位设备，或者根本不想自动分享位置信息。检测到的位置甚至可能不正确。在这种情况下，您应始终包含替代或备用方法，以便用户可以手动输入或更改其位置。

地理定位实战

复制并粘贴图6中的示例代码，并将其保存为HTML文件。在您喜欢的浏览器中打开它，然后按照网站上的两步说明，查看地理定位API在您当前位置周围绘制一个蓝色圆圈。

图6 使用地理定位API
1.  <!doctype html>
2.  <html lang="en">
3.  <head>
4.      <title>Geolocation demo</title>
5.      <meta charset="utf-8" />
6.  </head>
7.  <body>
8.      <h1>Geolocation demo</h1>
9.      <p>
10.        Find out approximately where you are.
11.    </p>
12.    <p>
13.        Step 1: <button onclick="GetMap()">Show map</button>
14.    </p>
15.    <p>
16.        Step 2: When prompted, allow your location to be shared to see Geolocation in action
17.    </p>
18.    <div id="mapDiv" style="position: relative; width: 800px; height: 600px;"></div>
19.    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
20.    <script type="text/javascript">
21.        var map = null;
22.        function GetMap() {
23.            /* Replace YOUR_BING_MAPS_KEY with your own credentials.
24.                Obtain a key by signing up for a developer account at
25.                http://www.microsoft.com/maps/developers/ */
26.            var cred = "YOUR_BING_MAPS_KEY";
27.            // Initialize map
28.            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
29.                { credentials: cred });
30.            // Check if browser supports geolocation
31.            if (navigator.geolocation) {
32.                navigator.geolocation.getCurrentPosition(locateSuccess, locateFail);
33.            }
34.            else {
35.                alert('I\'m sorry, but Geolocation is not supported in your current browser. Have you tried running this demo in IE9?');
36.            }
37.        }
38.        // Successful geolocation
39.        function locateSuccess(loc) {
40.            // Set the user's location
41.            var userLocation = new Microsoft.Maps.Location(loc.coords.latitude, loc.coords.longitude);
42.            // Zoom in on user's location on map
43.            map.setView({ center: userLocation, zoom: 17 });
44.            // Draw circle of area where user is located
45.            var locationArea = drawCircle(userLocation);
46.            map.entities.push(locationArea);
47.        }
48.        // Unsuccessful geolocation
49.        function locateFail(geoPositionError) {
50.            switch (geoPositionError.code) {
51.                case 0: // UNKNOWN_ERROR
52.                    alert('An unknown error occurred, sorry');
53.                    break;
54.                case 1: // PERMISSION_DENIED
55.                    alert('Permission to use Geolocation was denied');
56.                    break;
57.                case 2: // POSITION_UNAVAILABLE
58.                    alert('Couldn\'t find you...');
59.                    break;
60.                case 3: // TIMEOUT
61.                    alert('The Geolocation request took too long and timed out');
62.                    break;
63.                default:
64.            }
65.        }
66.        // Draw blue circle on top of user's location
67.        function drawCircle(loc) {
68.            var radius = 100;
69.            var R = 6378137;
70.            var lat = (loc.latitude * Math.PI) / 180;
71.            var lon = (loc.longitude * Math.PI) / 180;
72.            var d = parseFloat(radius) / R;
73.            var locs = new Array();
74.            for (x = 0; x <= 360; x++) {
75.                var p = new Microsoft.Maps.Location();
76.                brng = x * Math.PI / 180;
77.                p.latitude = Math.asin(Math.sin(lat) * Math.cos(d) + Math.cos(lat) * Math.sin(d) * Math.cos(brng));
78.                p.longitude = ((lon + Math.atan2(Math.sin(brng) * Math.sin(d) * Math.cos(lat), Math.cos(d) - Math.sin(lat) * Math.sin(p.latitude))) * 180) / Math.PI;
79.                p.latitude = (p.latitude * 180) / Math.PI;
80.                locs.push(p);
81.            }
82.            return new Microsoft.Maps.Polygon(locs, { fillColor: new Microsoft.Maps.Color(125, 0, 0, 255), strokeColor: new Microsoft.Maps.Color(0, 0, 0, 255) });
83.        }
84.    </script>
85.</body>
86.</html>

如果按原样运行代码，您的位置将与有关无效凭据的消息一起显示，如图7所示。要获得没有警告文本的结果（图8），您需要将YOUR_BING_MAPS_KEY替换为您自己的密钥，该密钥在您注册必应地图开发者帐户时生成。

图7 没有有效密钥的地理定位演示地图位置

图8 插入有效密钥后的地理定位演示地图位置

要查看其他地理定位示例，这些示例使用图钉映射您的位置，请访问IE Test Drive或参加HTML5 Web训练营。

在此处了解有关地理定位的更多信息

© . All rights reserved.