我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

HTML5地理位置定位(HTML5Geolocation)

   HTML5的强大,无需我过多的介绍,其中Geolocation地理定位是HTML5的重要特性之一。使用这个特性我们就可以开发出基于地理位置信息的应用。例如你要实现查询用户周边酒店、加油站等功能时,你可以调用百度地图、高德地图、google地图等接口,然后根据用户的具体地理坐标位置等信息来搜寻周边事物。

长春ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!

   当然,每个人的地理位置信息是属于他个人的隐私。所以一般游览器都会先询问用户是否愿意,如果用户拒绝的话,则用户位置信息是不可用的。

   废话不多说,直接上代码:

   以上是没有报错信息处理的代码。如果未能显示出纬度(Latitude)、经度(Longitude)信息的话,那你就得检查下游览器是否支持地理定位。

(1)如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息。

(2)如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象。showPosition() 函数则是获得并显示经度和纬度。

   当然我们也可以有处理错误的功能反馈给用户:

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED://用户不允许地理定位
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE://无法获取当前位置
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT://操作超时
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR://未知错误
      x.innerHTML="An unknown error occurred."
      break;
    }
  }

   getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数:

navigator.geolocation.getCurrentPosition(showPosition,showError);

 

   嗯,这样你就可以获得了用户的地理位置坐标信息。其实最重要的无非就是上面的那行代码,和获取坐标的两个方法:

position.coords.latitude//纬度
position.coords.longitude//经度

   就酱紫了?不,它还能获得些呢,客观别急,接着往下看。

   getCurrentPosition()--返回数据:

属性
描述
coords.latitude
十进制数的纬度
coords.longitude十进制数的经度
coords.accuracy位置精度
coords.altitude海拔,海平面以上以米计
coords.altitudeAccuracy位置的海拔精度
coords.heading方向,从正北开始以度计
coords.speed速度,以米/每秒计
timestamp响应的日期/时间

   

   嗯~是不是有点屌?但是你有没发现,这种定位并不是实时的。如果用户使用的是移动端,并且他在移动中,那坐标也必须跟随着在不停的改变中,而之前获得的坐标还有毛用啊!呵呵,莫慌!屌炸天的Geolocation对象,有个牛逼的方法:

   watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置。

   clearWatch() - 停止 watchPosition() 方法。

   如果你有台爱疯(iphone)之类精确的GPS设备,那就更是如虎添翼了。

   可以用手机或ipad去测试下,看看是否能实时定位。


当前文章:HTML5地理位置定位(HTML5Geolocation)
网站网址:http://shouzuofang.com/article/gccdgj.html

其他资讯