HTML5中地理位置定位技术的应用与探究

朱国艺++周玉珍

摘 要随着移动终端设备的飞速发展，App应用开发中地理位置定位（Geolocation）成为了当前互联网最为热门的技术之一，它可以获得用户当前的位置信息，结合谷歌或百度地图的开放接口，能够为客户提供全面的移动信息服务。通过分析HTML5地理定位技术的工作原理，它主要使用Geolocation API对象来获取具体位置的经纬度信息，通过在线地图的接口地址转换，可实现位置定位技术的商业化应用。

【关键词】HTML5 位置定位 移动终端 地图服务

1 服务应用

地理位置定位技术用以获得用户当前具体的位置信息，通过与地图数据的综合比对，可以针对性地推出友好的贴心服务。相当于移动设备具有了一定的人工智能，让用户在需要某种服务时，附近对应的服务信息会自动呈现出来，供用户选择。例如你在查找附近的餐厅，只需在地图软件或网页中输入“餐厅”关键字，搜索结果页面会列出你附近所有店铺名、距离、口碑等信息供参考。此种贴心服务常常让用户觉得技术的情感功能所带来的温馨，甚至会产生一定程度的软件依赖性，如天气预报功能，无论你到哪个城市，都会即时显示当地城市的信息、温度、湿度、空气质量等指数，让你了解到该城市的基本天气情况；同样在移动互联网站点的应用也十分广泛，如一些新闻网站经常推送你所在地区的信息内容，提高用户的浏览和点击量；房产网中的城市定位功能非常智能，当用户登录至该网站时，页面会自动切换到访客所在的区域并推送相应地段的房产信息，从而提供更精确的本地宣传和销售服务。除了在新闻内容的应用之外，在社交媒体应用中位置定位功能也发挥了较大作用，如微信中的查找附近的人功能，能够把各个终端登录位置信息进行统计计算，最后排列出附近的人名单。

2 工作原理

在访问位置信息前，浏览器都会询问用户是否共享其位置信息，它必须在用户的允许下才能进行，以谷歌浏览器为例，当访问具有地理定位的网站时，它会弹出一个对话框，询问你是否允许网站获取你的位置信息。虽然每次都要点击一次，但也不要觉得繁琐，因为这是给用户提供一道安全门，只有你同意开门，私人信息才会共享出去。如果你允许浏览器与网站共享您的位置，浏览器会向 Google 位置服务发送本地网络信息，计算出您所在的位置。

由于网络访问方式的不同，确定位置信息也有多种方法。如通过获取电脑IP地址去获取具体位置，但此种方法有局限性，因为IP地址受网络服务商的管理和分配，或者在有用户使用代理等方式上网的情况下，可能会造成数据不准确。另一种运用智能手机上网，是通过获取客户的手机信号接收塔，或者是设备中的GPS来定位并获取具体信息，基本可以得到相对精确的位置信息。这个位置信息一般是指获取当前位置的经度和纬度，再通过强大的在线地图服务把这个经纬度信息转换成具体的地址。这个地址信息可以供网络应用程序调用，从而推送一些本地或附近的内容信息。

3 技术实现

3.1 浏览器支持检测

支持HTML5技术的浏览器中都可以获取到定位信息，一般Internet Explorer 9以上、Firefox、Chrome等都支持这一技术，而这些浏览器中通过内置Geolocation API可以查询到位置信息，并供程序调用。当然，也不排除还有人在使用更低版本的浏览器，这时就无法应用到这项新技术，所以还是有必要在使用之前先检测所用的浏览器的兼容性情况。实现方式的代码是：if （navigator.geolocation）{

//你的浏览器支持位置定位

}else{

alert（"浏览器不支持地理定位。"）；

}

这是一个简单的选择语句，如果支持位置定位功能的浏览器，可进行下一步的获取信息编程。

3.2 获取经纬度

获取具体的经纬度信息可以使用geolocation对象的getCurrentPosition方法，如在上面的检测程序段中添加如下代码：

if （navigator.geolocation）{

navigator.geolocation.getCurrentPosition（showPosition）；

}else{

alert（"瀏览器不支持地理定位。"）；

}

这样通过getCurrentPosition方法就获取到了当前具体的地理位置信息，最后通过showPosition回调函数，输出相应的信息到显示器。showPosition函数代码如下：

function showPosition（position）{

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

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

alert（'纬度：'+lat+'，经度：'+lag）；

}

其中，Latitude代表纬度，longitude代表经度，当获取成功之后会返回一个position对象，这个对象的coords属性即是坐标属性，返回了经、纬度的坐标数据。

3.3 地图地址转换

获取了相应的经纬度信息之后，它是一个数字形式展现，如经度：121.542121，纬度：29.254514，这样还不能具体到所在国家及省份、城市等详细信息，也就不能更好地运用网站的本地服务。解决的方法是运用在线地图软件转换，如谷歌地图、百度地图等。以谷歌地图为例，把刚才得到的经纬度用网址的形式发送到谷歌地图开放接口，如发送成功地图会返回用户所在的具体位置信息。实现方法是把刚才的经纬度信息连接起来赋给某个变量，如：

var latlon = position.coords.latitude+'，'+position.coords.longitude；

然后再把这个带有经纬度信息的latlon变量写到谷歌地图的网址中：

http：//maps.google.cn/maps/api/geocode/json？latlng='+latlon+'&language=CN

这样谷歌的这个开放接口就会返回一串现实有意义的地址信息，再将获取到的信息输出即可看到结果。当然，地址信息呈现还有以图像形式展示的，这种形式又分为静态地图图片和动态地图图片，静态的图片相当于截图，是不会变化的。而动态地图图片是会根据移动设备位置的改变而不断更新位置，这种方式更智能也更贴合商务企业的服务理念。

4 小结

随着国家倡导无线城市建设的理念，以及智能手机和平板电脑的大规模使用，各种网站及应用APP的开发都需要基于地理位置提供的服务，Html5提供了Geolocation API接口，能方便快捷地实现地理位置的定位与跟踪，并允许用户将所得到的位置信息与谷歌及百度地图转换，这一功能可以帮助开发者开发基于位置服务的各种应用程序，推送所在位置周边相关的商业信息，提供优质的个性化服务。

参考文献

[1]梁莉菁.基于Geolocation API的Html5地理位置追踪定位的实现[J].萍乡高等专科学校学报，2014

[2]滕文.基于HTML5定位移动互联站点的研究与设计[J].民营科技，2013.

[3]鲁立，刘桢.基于HTML5地理定位技术的移动终端导航设计[J].电子设计工程，2012.

[4]张亚飞.手机网页及网站设计[M].北京：清华大学出版社，2013.

[5]刘增杰，臧順娟，何楚斌.精通HTML5+CSS3+JavaScript网页设计[M].北京：清华大学出版社，2015.

[6]月光光.HTML5获取地理位置定位信息.[DB/OL].[2015-04].http：//www.helloweba.com/view-blog-300.html

作者简介

朱国艺（1983-），男，广东省中山市人。现为中山市中等专业学校计算机中级讲师，研究生学历、教育硕士学位。研究方向为移动互联、数字多媒体技术。

周玉珍（1989-），女，广东省中山市人。大学本科学历。就职于中山市中等专业学校。研究方向为移动互联、数字多媒体技术。

作者单位

中山市中等专业学校 广东省中山市 528400