基于HTML5的网络地图研究与实现

2023.03.13

岳鹏磊等

摘要：随着互联网技术的飞速发展，互联网地图的应用已经越来越广泛。文章就基于html5技术下进行的网络地图开发的一些关键问题进行了阐述和说明。

关键词：网络地图；html5技术；导航

HTML5，万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML5的图像img标签及svg也进行了改进，性能得到进一步提升，而且较之前几个版本HTML5又提供了一些新的元素和属性。HTML5技术具有很好的跨平台性，HTML5技术能够实现网页的及时更新。HTML5技术，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。

1 HTML5技术的新特性

HTML5是HTML的下一代产品，目前仍然处于完善阶段。为了推动Web标准化运动的发展，一些公司联合起来，成立了WHATWG的组织，在2006年，万维网决定双方展开合作，来创建一个新版本的HTML，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布。这特就意味着HTML5将推动Web进入新的时代。

1.1 新的API提高了设备的兼容性

HTML5拥有一些新的API。例如：canvas，用于渲染图形或是其他的视觉图像，甚至可以直接做出伪3D游戏；地理位置共享，通过Geolocation功能从而获取用户的地理位置信息；一个和draggable属性一起使用的拖放API；跨文档请求，websocket，一种更加高效的通讯方式，等等一些新的API。HTML5提供了前所未有的数据与应用接入开放接口，使外部应用可以直接与浏览器内部的数据直接相连，来帮助开发者构建精彩的桌面和移动应用程序。

1.2 HTML5拥有更加有效的服务器推送技术

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。其中主要是Web Sockets协议，能让浏览器和服务器保持链接，这意味着网页能够承载需要即时通信的网络应用：聊天、在线游戏等等。

1.3 离线功能和本地存储

HTML5提供了一个非常重要的特性，可以编写离线应用程序。所以理论上，我们可以有离线的Gmail，可以在没有网络连接的时候编写邮件在上线时发送；对于手机，我们可以有HTML5版本的Google Reader，在有网络的时候下载新闻供离线时阅读。而有了离线功能，也能让网页应用程序可以和原生应用程序竞争了。HTML5中定义的WebStorage已经被广泛的支持，利用本地存储技术，可以缓存一些不经常变更的数据，比如导航，脚部申明等，保存用户的一些个性化设置；用户的浏览历史等。

2 基于HTML5的网络地图的创建

在HTML5中，利用window.navigator对象的新增属性geolocation，通过Geolocation API对该属性进行访问。如果浏览器支持地理定位，就能够直接使用这组API来获取当前位置信息，对于拥有GPS的设备，比如iPhone，地理定位更加精确。借助地理位置（geolocation）这个特性，我们可以确定用户的位置，从而开发基于位置信息的应用。此外，HTML5的Geolocation API主要特点还包括以下两个方面：其一，API不去获取用户的具体位置信息，而是通过其他三方接口来获取，例如IP，GPS，WIFI等方式。其二，用户拥有自足选择权，程序执行时会首先征得用户同意，基于这个特性我们能够很好的保护用户的隐私。

2.1 检测浏览器是否支持W3C地理位置API

如果浏览器支持W3C地理位置API，则执行方法getCurrentPosition，参数showPositionMes，showErrorMes分别为后续具体方法。否则提示浏览器不支持HTML5地理位置信息，下面的代码实现检测浏览器是否支持navigator.geolocation。

if（navigator.geolocation） { navigator.geolocation.getCurrentPosition（showPositionMes， showErrorMes）； }else { alert（"您的浏览器不支持Html5地理位置信息"）； }

2.2 获取地理位置信息

浏览器支持W3C地理位置API，执行方法getCurrentPosition获取位置信息，若获取位置信息失败则执行回调函数function showErrorMes（），若获取位置信息成功则执行回调函数showPositionMes（）并获得位置信息详细数据，代码如下：

function showPositionMes（position） {

x.innerHTML = "纬度：" + position.coords.latitude + "

经度： " + position.coords.longitude

+ "

海拔高度： " + position.coords.altitude；}

function showErrorMes（error） {

switch （error.code） {

case error.PERMISSION_DENIED：

x.innerHTML = "拒绝请求"；

break；

case error.POSITION_UNAVAILABLE：

x.innerHTML = "位置信息不可用"；

break；

case error.TIMEOUT：

x.innerHTML = "请求超时"；

break；

case error.UNKNOWN_ERROR：

x.innerHTML = "未知错误"；

break；

}

2.3 地图的初始化

首先获取百度地图API：

利用获取到的经纬度数值进行地图的初始化定位，设置地图中心为当前获取的地理信息（经度，纬度），同时在地图上添加比例尺以及默认缩放平移控件，具体代码实现如下：

var map = new BMap.Map（"yplmap"）；

var point = new BMap.Point（position.coords.longitude，position.coords.latitude）；

map.centerAndZoom（point，14）；

var top_left_control = new BMap.ScaleControl（{anchor： BMAP_ANCHOR_TOP_LEFT}）；

var top_left_navigation = new BMap.NavigationControl（）；

map.addControl（top_left_control）；

map.addControl（top_left_navigation）；

3 基于HTML5的网络地图的功能实现

3.1 实时定位跟踪

使用watchPosition方法可以持续获取用户的当前地理位置信息，它会时刻监视用户的位置，只要用户的位置发生变化，浏览器就会自动触发watchPosition（）的回调函数。watchPosition方法与getCurrentPosition使用方法基本相同。另外watchPosition（）有返回值，返回一个ID，可以使用clearWatch（）方法清除掉，类似于延迟函数/间隔函数（setTimeout/setInterval）。getCurrentPosition（）没有返回值。

执行语句如：navigator.geolocation.watchPosition（showPositionMes，showErrorMes，{frequency：1000}），第三个参数决定每秒更新一次，最后可以利用clearWatch（）方法终止定位跟踪。clearWatch（）接收一个watchPosition（）方法返回的数据，实现的功能是清除对用户位置的循环监视，从而终止实时定位。

3.2 路线搜索与规划

首先添加百度地图jquery ，然后确定路线的起点和终点，随后根据对路线规划的需求，在地图上规划出路线，以下为代码示例：

var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME，BMAP_DRIVING_POLICY_LEAST_DISTANCE，BMAP_DRIVING_POLICY_AVOID_HIGHWAYS]；

$（"#yplresult"）.click（function（）{

map.clearOverlays（）；

var i=$（"#ypldriving_way select"）.val（）；

search（start，end，routePolicy[i]）；

function search（start，end，route）{ var driving = new BMap.DrivingRoute（map， {renderOptions：{map： map， autoViewport： true}，policy： route}）；

driving.search（start，end）；}}）；

4 结语

当下，移动智能设备泛滥的情况下，越来越多的人都热衷于开发独立的移动应用，而HTML5技术也许将会成为独立移动应用的强有力的竞争者。它广而化之的网络标准，以及支持多设备跨平台应用的特性，受到大众的广泛青睐。而基于此而开发的网络地图，规避了多平台多操作系统的制约，将会是浏览器实现地理定位与导航的有效手段。不管你是想开发出传统网页进行信息展示平台交流还是想开发出视听结合多姿多彩的3D网络游戏，不论是PC客户端应用还是手持移动应用，HTML5都将是创新的主旋律。

[参考文献]

[1]孙鑫，付永杰.HTML5、CSS和JavaScript开发[M].北京：电子工业出版社，2012.

[2]陆凌牛.HTML5与CSS3权威指南[M].北京：机械工业出版社，2013.