• 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>

     
  • 相关阅读:
    Picture Control点击事件
    在C/C++中获取可执行文件的图标和信息
    C++获取系统图标方法
    C++ Vector 使用总结
    C++中vector和list的区别
    STL STD::list使用说明
    演示My97 DatePicker过程中的错误
    HTML5的语法变化
    利用 ACE 来实现 UDP 通讯
    VS2010中“工具>选项中的VC++目录编辑功能已被否决”解决方法
  • 原文地址:https://www.cnblogs.com/xipeiyang/p/4052129.html
Copyright © 2020-2023  润新知