HTML5地理定位(使用实例)

整    理:曹燕

时    间:2015-10-22

说    明:html5地理定位的使用实例

 

1.功能描述

程序包括一个html文件和一个php文件。

实现的功能是:①在定位成功的情况下,显示用户所在位置的经纬度、用户所在地点;当用户点击“查看周围店铺”时,在地图上显示周围的店铺以及从用户所在点到达店铺的路线。②在定位失败(包括用户拒绝定位等)的情况下,显示用户所在的省市。

 

2.前端html文件说明

2.1 getLocation()方法

功能:该方法在文档加载时执行,功能是获取定位

说明:若浏览器支持地理定位,则利用html5中提供的定位api进行定位;否则调用ip定位的方法。HTML5地理定位(使用实例)255

2.2 onSuccess(position)方法

功能: 该方法是定位成功时执行的回调函数,功能是获取并显示用户所在位置的经纬度、显示用户所在地点。

说明:①利用h5地理定位获取当前所在地点的经度和纬度;②将经度和纬度传给后台,通过ajax向后台请求获得位置信息,包括转换之后的百度标准经纬度、用户所在地点的详细信息。HTML5地理定位(使用实例)419

2.3 onError(error)方法

功能:该方法是定位失败时执行的回调函数,功能是调用ip定位的方法。HTML5地理定位(使用实例)477

2.4 ipLocate()方法

功能:该方法是在浏览器不支持地理定位或者地理定位失败时调用的函数,功能是显示用户所在位置的省市信息。

说明:通过ajax向后台请求获得位置信息,传给后台的经纬度是(400,400)这组无效数据,以表示经纬度获取失败HTML5地理定位(使用实例)605

2.5 showStores()方法

功能:该方法在用户点击“显示周围店铺”按钮时执行,功能是在百度地图上显示从用户位置到周围店铺之间的路线。

说明:此方法的顺利执行需要在html文件头部引入百度地图api

<script src="http://api.map.baidu.com/api?v=2.0&ak=gS3IRPx5CG3SUixVgIUbUi2c"

type="text/javascript"></script>HTML5地理定位(使用实例)823

 

3.后台php文件说明(待补充)

 

代码下载20151019locate

相关文档:HTML5地理定位(使用实例)

发表评论