zoukankan      html  css  js  c++  java
  • 基于浏览器的HTML5地理定位

    基于浏览器的HTML5地理定位

       地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理和一个基于浏览器的HTML5地理定位的小demo,过程就是获取浏览器经纬度,并用腾讯地图(大家可以选择自己喜欢的地图)显示出来,实现的最终效果如下图所示:

    检测浏览器是否支持:

     if (navigator.geolocation) {

        //console.log("浏览器支持!");

     }

    else {

        // console.log("浏览器不支持!");

     }

    、navigator.geolocation用于获取基于浏览器的当前用户地理位置,提供了3个方法:

    void getCurrentPosition(onSuccess,onError,options);

    //获取用户当前位置

    int watchCurrentPosition(onSuccess,onError,options);

    //持续获取当前用户位置

    void clearWatch(watchId);

    //watchId 为watchCurrentPosition返回的值

    //取消监控

    参数详细说明见下表:

    参数 功能 返回参数 是否必选
    onSuccess 方法成功时候的回调,返回position对象,通过这个对象可以获取地理位置的相关信息

    1、 Coords

    返回当前位置的坐标

    Coordinates

    2、 Timestamp

    返回获取坐标信息的时间

    字符串

    必须
    onError 方法失败时候的回调,返回error对象,通过这个对象返回错误类型

    1、Code

    返回代表错误类型的代码

    有如下数值 :

    ①用户未授权使用地理定位功能

    ②不能确定位置

    ③请求位置的尝试已超时

    2、message

    返回描述错误的字符串

    字符串

    可选
    options 额外参数

    1、enableHighAccuracy

    告诉浏览器我们希望得到可能的高精度的地理信息

    布尔值

    2、timeout

    限制请求位置的时间,设置多少毫秒后会报告一个超时错误

    数值

    3、maximumAge

    告诉浏览器我们愿意接受缓存过的位置,只要它不早于指定的毫秒数

     数值

     可选

    三、代码实现

    1、实现原理:html5地理定位 + 腾讯地图

    2、实现思路:

    ① 判断浏览器是否支持geolocation地理定位

    ② 用HTML5 Geolocation API (地理位置应用程序接口)获取经纬度

    ③ 调用腾讯地图接口,将获取到的经纬度以参数形式参入腾讯地图地理坐标中,并显示到页面上

      PS:也可以调用百度地图、谷歌地图、高德地图等,只需要将HTML5 Geolocation API获取到的值传入到相应的地图接口中

    3、代码实现:

    ① 调用腾讯地图JavaScript API,URL路径为:http://map.qq.com/api/js?v=2.exp

    ② js核心代码:

    function getLocation(){

      var options={
        enableHighAccuracy:true, //boolean 是否要求高精度的地理信息,默认为false
        maximumAge:1000 //应用程序的缓存时间
      }

      if(navigator.geolocation){
        //浏览器支持geolocation
        navigator.geolocation.getCurrentPosition(onSuccess,onError,options);

      }else{
       //浏览器不支持geolocation
       console.log("浏览器不支持!");
      }
    }

    //成功时
    function onSuccess(position){
      //返回用户位置
      //经度
      var longitude =position.coords.longitude;
      //纬度
      var latitude = position.coords.latitude;

      //使用腾讯地图API

      //腾讯地图的中心地理坐标
      var center = new qq.maps.LatLng(latitude, longitude);
      var map = new qq.maps.Map(document.getElementById("container"), {
        //地图的中心地理坐标
        center: center,
        //初始化地图缩放级别
        zoom: 16
      });

      //在地图中创建信息提示窗口
      var infoWin = new qq.maps.InfoWindow({
        map: map
      });
      //打开信息窗口
      infoWin.open();
      //设置信息窗口显示区的内容
      infoWin.setContent('

    '+
    '您在这里
    纬度:'+ latitude+ '
    经度:'+longitude);
      //设置信息窗口的位置
      infoWin.setPosition(center);
    }


    //失败时
    function onError(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;
      }

    }

    window.onload=getLocation;

    DEMO演示

    注意事项:

       此代码在PC端运行,会得不到数据,因为获取位置信息,以及监控位置的变化这些操作都属于敏感性操作,所以browsers在执行都会非常谨慎。它需要你在安全的环境并且获取用户的同意才会执行。

       在移动端,会提示是否允许地理位置授权,用户同意后,才会继续获取数据,进行下面的操作。

       还有一点需要注意:

       用HTML5 Geolocation API (地理位置应用程序接口)获得的经纬度参数,传入到腾讯地图,并显示出来后,会发现会有一定的偏移,这是因为我国把美国卫星的GPS的地球坐标,进行偏移的算法,计算后,得出了一个火星坐标。为了让火星坐标能正确的显示,又给每部导航软件加入了这个算法,可以在大家的地图上还原位置;而自己写的程序里没有加入此算法,所以出现了偏移问题,而这个加偏并不是线性的加偏,所以各地的偏移情况都会有所不同。

    以上为“H5案例分享”团队原创文章,转载请注明出处!
  • 相关阅读:
    SQL Server 数据库部分常用语句小结(三)
    SQL Server 数据库部分常用语句小结(四)
    通过存储过程(SP)实现SQL Server链接服务器(LinkServer)的添加
    pcb布线强弱电间隔距离
    程序占用内存大小
    Offer来了(原理篇)笔记之第三章并发编程
    Offer来了(原理篇)笔记之第一章JVM原理
    西瓜视频奇妙的bug
    mongodb忘记了admin的账号密码
    MongoDB更改默认端口
  • 原文地址:https://www.cnblogs.com/yangmengsheng/p/5973602.html
Copyright © 2011-2022 走看看