html5实例的简单介绍

如何使用HTML5地理位置定位功能

HTML5提供了地理位置定位功能（Geolocation API），能确定用户位置，我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5，借助百度、谷歌地图接口来获取用户准确的地理位置信息。

定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的现代浏览器上运行，特别是手持设备如iphone，地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位，如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的，所以我们在访问该应用时会提示是否允许地理定位，我们当然选择允许即可。

?

1

2

3

4

5

6

7

function getLocation(){

if (navigator.geolocation){

navigator.geolocation.getCurrentPosition(showPosition,showError);

}else{

alert("浏览器不支持地理定位。");

}

}

上面的代码可以知道，如果用户设备支持地理定位，则运行 getCurrentPosition() 方法。如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象，getCurrentPosition() 方法的第二个参数showError用于处理错误，它规定当获取用户位置失败时运行的函数。

我们先来看函数showError()，它规定获取用户地理位置失败时的一些错误代码处理方式：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

function showError(error){

switch(error.code) {

case error.PERMISSION_DENIED:

alert("定位失败,用户拒绝请求地理定位");

break;

case error.POSITION_UNAVAILABLE:

alert("定位失败,位置信息是不可用");

break;

case error.TIMEOUT:

alert("定位失败,请求获取用户位置超时");

break;

case error.UNKNOWN_ERROR:

alert("定位失败,定位系统失效");

break;

}

}

我们再来看函数showPosition(),调用coords的latitude和longitude即可获取到用户的纬度和经度。

?

1

2

3

4

5

function showPosition(position){

var lat = position.coords.latitude; //纬度

var lag = position.coords.longitude; //经度

alert('纬度:'+lat+',经度:'+lag);

}

利用百度地图和谷歌地图接口获取用户地址

上面我们了解了HTML5的Geolocation可以获取用户的经纬度，那么我们要做的是需要把抽象的经纬度转成可读的有意义的真正的用户地理位置信息。幸运的是百度地图和谷歌地图等提供了这方面的接口，我们只需要将HTML5获取到的经纬度信息传给地图接口，则会返回用户所在的地理位置，包括省市区信息，甚至有街道、门牌号等详细的地理位置信息。

我们首先在页面定义要展示地理位置的div，分别定义id#baidu_geo和id#google_geo。我们只需修改关键函数showPosition()。先来看百度地图接口交互，我们将经纬度信息通过Ajax方式发送给百度地图接口，接口会返回相应的省市区街道信息。百度地图接口返回的是一串JSON数据，我们可以根据需求将需要的信息展示给div#baidu_geo。注意这里用到了jQuery库，需要先加载jQuery库文件。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

function showPosition(position){

var latlon = position.coords.latitude+','+position.coords.longitude;

//baidu

var url = ";callback=renderReverselocation="+latlon+"output=jsonpois=0";

$.ajax({

type: "GET",

dataType: "jsonp",

url: url,

beforeSend: function(){

$("#baidu_geo").html('正在定位...');

},

success: function (json) {

if(json.status==0){

$("#baidu_geo").html(json.result.formatted_address);

}

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

$("#baidu_geo").html(latlon+"地址位置获取失败");

}

});

});

再来看谷歌地图接口交互。同样我们将经纬度信息通过Ajax方式发送给谷歌地图接口，接口会返回相应的省市区街道详细信息。谷歌地图接口返回的也是一串JSON数据，这些JSON数据比百度地图接口返回的要更详细，我们可以根据需求将需要的信息展示给div#google_geo。

?

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

function showPosition(position){

var latlon = position.coords.latitude+','+position.coords.longitude;

//google

var url = ''+latlon+'language=CN';

$.ajax({

type: "GET",

url: url,

beforeSend: function(){

$("#google_geo").html('正在定位...');

},

success: function (json) {

if(json.status=='OK'){

var results = json.results;

$.each(results,function(index,array){

if(index==0){

$("#google_geo").html(array['formatted_address']);

}

});

}

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

$("#google_geo").html(latlon+"地址位置获取失败");

}

});

}

以上的代码分别将百度地图接口和谷歌地图接口整合到函数showPosition()中，我们可以根据实际情况进行调用。当然这只是一个简单的应用，我们可以根据这个简单的示例开发出很多复杂的应用，建议用手机浏览器访问DEMO演示。

相关问答

Q1: HTML5+CSS3小实例：手风琴式加载动画

HTML5+CSS3做一个手风琴式的加载动画，这动画、这质感、这配色，就问你喜不喜欢？！这个案例的知识点主要是：css的自定义属性 + 动画延迟 + 颜色滤镜（hue-rotate）。

效果：

源码：

Q2: 如何用html5开发wap版实例

下面列举HTML5适合移动应用开发的几大特性：

1.离线缓存为HTML5开发移动应用提供了基础

HTML5 Web Storage API可以看做是加强版的cookie，不受数据大小限制，有更好的弹性以及架构，可以将数据写入到本机的ROM中，还可以在关闭浏览器后再次打开时恢复数据，以减少网络流量。

同时，这个功能算得上是另一个方向的后台“操作记录”，而不占用任何后台资源，减轻设备硬件压力，增加运行流畅性。

在线app支持边使用边下载离线缓存，或者不下载离线缓存；而离线app必须是下载完离线缓存才能使用。

形象点说，cookie就是存了电话和菜单，想吃什么要叫外卖，等多长时间才能吃到就得看交通情况了；离线缓存就是直接在冰箱里存了食物，想吃就能马上吃到（当然，想吃最新的食物同样可以打电话预定）。

设计师要知道，什么时候让用户下载离线缓存（注意在线和离线app的区别）。

2.音频视频自由嵌入，多媒体形式更为灵活

原生开发方式对于文字和音视频混排的多媒体内容处理相对麻烦，需要拆分开文字、图片、音频、视频，解析对应的URL并分别用不同的方式处理。

HTML5在这个方面完全不受限制，可以完全放在一起进行处理。

设计师要知道，如果新闻类、微博类、社交类应用的信息呈现中实现文字与多媒体混排，而不用专门嵌入webview，将是一件多美好的事情，至少现在原生方式实现起来还有困难。

3.地理定位，随时随地分享位置

充分发挥移动设备对定位上的优势，推动LBS应用发展。

可以综合使用GPS、wifi、手机等方式让定位更为精准、灵活。

地理位置定位，让定位和导航不再专属导航软件，地图也不用下载非常大的地图包，可以通过缓存来解决，到哪儿下哪儿，更灵活。

设计师要知道，现在嵌入LBS功能的应用越来越多，这也是移动设备与台式PC相比最大的优势之一，HTML5能把这个优势再度扩大化，好好想想怎么在你设计的应用里用上吧！

4.Canvas绘图，提升移动平台的绘图能力

使用Canvas API可以简单绘制热点图收集用户体验资料

支持图片的移动、旋转、缩放等常规编辑

Canvas – 2D的绘图功能支持

Canvas 3D – 3D的绘图功能支持

SVG – 向量图支援

设计师要知道，图片的移动、旋转、缩放？那都太基础了，自己画都是小case，至于怎么用，好好想想吧！

5.专为移动平台定制的表单元素

浏览器中出现的html5表单元素与对应的键盘：

类型 用途 键盘

Text 正常输入内容 标准键盘

Tel 电话号码 数字键盘

Email 电子邮件地址文本框 带有@和.的键盘

url 网页的URL 带有.com和.的键盘

Search 用于搜索引擎，比如在站点顶部显示的搜索框 标准键盘

range 特定值范围内的数值选择器，典型的显示方式是滑动条 滑动条或转盘

只需要简单的声明 input type=”email” 即可完成对不同样式键盘的调用，简捷方便。

设计师要知道，用的时候记得告诉研发同事一声！

Q3: HTML5 Canvas中绘制矩形实例

让我们来看一下Canvas内置的简单几何图形

—

矩形的绘制。在Canvas中，绘制矩形有三种方法：填充(fillRect)、描边(StrokeRect)以及清除(clearRect)。当然，我们也可以使用“路径”来描绘包括矩形在内的所有图形。

以下是上述三种方法的API:

1.fillRect(x,y,width,height)。绘制一个从(x,y)开始，宽度为width，高度为height的实心矩形。

2.strokeRect(x,y,width,height)。绘制一个从(x,y)开始，宽度为width，高度为height的矩形框。该矩形框会根据当前设置的strokeStyle、lineWidth、lineJoin和miterLimit属性的不同而渲染成不同的样式。

3.clearRect(x,y,width,height)。清除从(x,y)开始，宽度为width，高度为height的矩形区域，使之完全透明。

在调用上述方法绘制Canvas之前，我们需要设定填充和描边的样式。设定这些样式最基本的方法是使用24位色(用16进制字符串表示)。以下是一个简单的例子：

代码如下:

context.fillStyle

=

"#000000";

context.strokeStyle

=

"#ff00ff";

在下面的例子中，填充色设定为黑色，而描边色则设定为紫色：

代码如下:

function

drawScreen()

{

context.fillStyle

=

"#000000";

context.strokeStyle

=

"#ff00ff";

context.lineWidth

=

2;

context.fillRect(10,

10,

40,

40);

context.strokeRect(0,

0,

60,

60);

context.clearRect(20,

20,

20,

20);

}

代码执行结果如下图所示：