HTML5之Geolocation API、如何获取女神地址

顺晟科技

2021-07-31 08:02:34

236

从最开始学习HTML5到今天刚刚一个星期，明天还可以玩呢!

15号我意识到自己确实无法忍受自己死寂的工作生活了，若是听之任之，自己必然废之，你们一定明白那种感觉的，

每天都会非常有压力的想进步，每天都会想看书，但是每天却贪生怕死的玩游戏，看网页，看电影如此荒废岁月。

那天下午，我落寞的看着屏幕，在屏幕中看见了我空洞寂寞的脸，于是我想到了改变。

一直到今天我深刻的感觉到了自己的变化，若是照此下去，我的理想没准真的能实现呢!

好吧，希望自己好好的坚持下去，用21天形成一个习惯，用行动改变自己的人生吧!

Geolocation API

在HTML5中为window.navigation新增了一个geolocation属性，可以通过getCurrentPosition获取到当前地理位置信息：

　　navigation.geolocation.getCurrentPosition(

　　function (position) {},

　　function (error) {},

　　opts

　　);

　　与第二个都是函数，一个用于成功时一个用于失败时调用;

　　其中第二个函数的错误码为：

　　1 用户拒绝位置服务

　　2 获取不到位置信息

　　3 获取信息超时

　　第三个参数为一可选属性列表(js对象)

　　1 enableHighAccuracy 要求高精度信息

　　2 timeout 设置超时时间

　　3 maximumAge 数据信息过期时间

使用watchPosition方法可持续获取用户当前位置信息：

　　int watchCurrentPosition(onSucc, onError, opts)

　　与上面的方法参数一致

我们这里详细说说调用成功后返回的position对象：

该对象具有以下信息：

　　1 latitude 纬度

　　2 longitude 经度

　　3 altitude 海拔高度

　　4 accuracy 获取经度纬度(米)

　　5 altitudeAccurancy 获取海拔(米)

　　6 heading 设备朝向

　　7 speed 前进速度

　　8 timestamp 获取地理位置信息时的时间戳

说干就干，我们来试试，下面代码是获取地理信息：

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title></title>
     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             navigator.geolocation.getCurrentPosition(function (position) {
 
                 var s = '';
             }, function (error) {
                 var type = {
                     1: '位置服务被拒绝',
                     2: '获取不到信息',
                     3: '超时'
                 }
                 alert('获取数据失败：' + type[error.code]);
             });
 
         });
     </script>
 </head>
 <body>
     <div id="map">
     </div>
 </body>
 </html>

还真获取到了的说!!!

地理位置是敏感信息机密数据，大家使用时要谨慎!!!

无图无真相，与强大的google结合使用，与google地图结合使用，在地图上显示：

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title></title>
     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             var init = function () {
                 navigator.geolocation.getCurrentPosition(function (position) {
                     var c = position.coords;
                     //设定地图参数，将当前位置的纬度，经度设为地图中心点
                     //var latlng = new google.maps.LatLng(c.latitude, c.longitude);
                     var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
 
                     var opt = {
                         zoom: 14,
                         center: latlng,
                         mapTypeId: google.maps.MapTypeId.ROADMAP
                     };
                     //创建地图并显示在div
                     var map = new google.maps.map($('#map')[0], opt);
                     //在地图上创建标记
                     var marker = new google.maps.Marker({
                         position: latlng,
                         map: map
                     });
 
                     //设定标注窗口，指定文字
                     var marker = new google.maps.Marker({
                         position: latlng,
                         map: map,
                         title: "You are here! (at least within a " + position.coords.accuracy + " meter radius)"
                     });
                     var s = '';
                 }, function (error) {
                     var type = {
                         1: '位置服务被拒绝',
                         2: '获取不到信息',
                         3: '超时'
                     }
                     alert('获取数据失败：' + type[error.code]);
                 });
             }
 
             window.init = init;
             //            init();
         });
     </script>
 </head>
 <body>
     <button onclick="init();">
         显示</button>
     <div id="map">
     </div>
     <script>
         var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
         document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
 </script>
 
 <script type="text/javascript" src="http://www.google-analytics.com/ga.js">
 </script>
 </body>
 </html>

注意：我在这里一直报个错，

TypeError: google.maps.LatLng is not a constructor

这个错错的我都无语了。。。。搞了很久找不到答案，哪位大侠知道告知我一下!!!

上一篇：HTML5表单新功能解析下一篇：移动浏览器内核

网站建设

Html

HTML5之Geolocation API、如何获取女神地址

Geolocation API