zoukankan      html  css  js  c++  java
  • HTML5 GeoLocation 地理定位

    window.navigator 对象包含有关访问者浏览器的信息,window.navigator 对象在编写时可不使用 window 这个前缀。

    浏览器支持

    Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。

    注释:对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确



    HTML5 地理定位

    html5为window.navigator提供了geolocation属性,用于获取基于浏览器的当前用户地理位置。

    window.navigator.geolocation提供了3个方法分别是

    void getCurrentPosition(onSuccess,onError,options);
    //获取用户当前位置
    
    int watchPosition(onSuccess,onError,options);
    //持续获取当前用户位置
    
    void clearWatch(watchId);
    //watchId 为watchCurrentPosition返回的值
    //取消监控
    
    
    options = {
         enableHighAccuracy,//boolean 是否要求高精度的地理信息
         timeout,//获取信息的超时限制
         maximumAge//对地理信息进行缓存的时间
    }
    //options可以不写,为默认即可


    使用getCurrentPosition()来获取用户位置(其实获取的是被用户使用的浏览器的位置):

    <!DOCTYPE html>
    <html>
    <body>
    <p id="demo">点击这个按钮,获得您的坐标:</p>
    <button onclick="getLocation()">试一下</button>
    <script>
    var x=document.getElementById("demo");
    function getLocation(){
      if (navigator.geolocation){
        navigator.geolocation.getCurrentPosition(showPosition,showError);
      }
      else{

        x.innerHTML="Geolocation is not supported by this browser.";

      }
    }
    function showPosition(position){
      x.innerHTML="Latitude: " + position.coords.latitude +
      "<br />Longitude: " + position.coords.longitude;
    }
    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;
      }
    }
    </script>
    </body>
    </html>


    google地图应用
    和上面不同的是
    function showPosition(position){
      var latlon=position.coords.latitude+","+position.coords.longitude;
     var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
      +latlon+"&zoom=14&size=400x300&sensor=false";
      document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
    }


    下面的例子展示 watchPosition() 方法:

    <!DOCTYPE html>
    <html>
    <body>
    <p id="demo">点击这个按钮,获得您的坐标:</p>
    <button onclick="getLocation()">试一下</button>
    <script>
    var x=document.getElementById("demo");
    function getLocation(){
      if (navigator.geolocation){
        navigator.geolocation.watchPosition(showPosition);
      }
      else{

        x.innerHTML="Geolocation is not supported by this browser.";

      }
    }
    function showPosition(position){
      x.innerHTML="Latitude: " + position.coords.latitude +
      "<br />Longitude: " + position.coords.longitude;
    }
    </script>
    </body>
    </html>

     
  • 相关阅读:
    C++范围解析运算符::的使用
    C程序的内存布局
    ARM中LDR伪指令与LDR加载指令
    每天一个linux命令(12):more命令
    C++ explicit关键字
    C++内联函数详解
    C++友元详解
    C++ new操作符详解
    CDN技术详解笔记
    字符串匹配(KMP 算法 含代码)
  • 原文地址:https://www.cnblogs.com/xipeiyang/p/4052129.html
Copyright © 2011-2022 走看看