html5 geolocaltion

最新推荐文章于 2020-01-09 09:28:58 发布

沈纵情

最新推荐文章于 2020-01-09 09:28:58 发布

阅读量1.1k

点赞数

分类专栏： html5-web 文章标签： html5 function 浏览器 stylesheet google wrapper

本文链接：https://blog.csdn.net/jianguo_liao19840726/article/details/7604234

版权

html5-web 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

我住在南京江宁区在竹山站和小龙湾站之间的谭桥，google地图好像老旧了，呵呵，官方链接：http://html5.byends.com/geo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>使用Geolocation定位当前位置并显示在Google地图上</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
 
</head>
<body>
    <script>
        window.onload = function(){
            var watchID = null;
            function handlerSuccess(pos){
                //获取当前位置信息
                var latitude = pos.coords.latitude;
                var longitude = pos.coords.longitude;
                var title="你当前的位置";
                //地图中心坐标
                var latlng = new google.maps.LatLng(latitude,longitude);
                var myOptions = {
                  zoom: 16,
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  center:latlng
                };
                //生成google地图
                var map = new google.maps.Map(document.getElementById('map'),myOptions);
                //创建地图信息窗口
                var infowindow = new google.maps.InfoWindow({
                    content: title
                });
                //创建google地图标记
                var marker = new google.maps.Marker({
                    position: latlng,
                    title : title,
                    map: map
                });
                google.maps.event.addListener(marker,'mouseover',function() {
                  infowindow.open(map,marker);
                });
                google.maps.event.addListener(marker, 'mouseout',function() {
                  infowindow.close();
                });
            }
 
            function handlerError(error){
                switch(error.code){
                    case error.TIMEOUT:
                        if(!watchID) navigator.geolocation().clearWacth(watchID);
                        alert("geo获取地理位置失败！");
                    case error.PERMISSION_DENIED:
                        alert("你以将浏览器拒绝了获取当前位置！");
                    case error.POSITION_UNAVAILABLE:
                        alert("无法获取当前位置信息！");
                    default:
                        alert("请求失败！");
                }
            }
 
            if(navigator.geolocation){
                navigator.geolocation.getCurrentPosition(handlerSuccess,handlerError);
                watchID = navigator.geolocation.watchPosition(handlerSuccess,handlerError);
            }else{
                document.write("当前浏览器不支持Geolocation地理定位功能。");
            }
        }
    </script>
    <div id="map" style="height:400px;"></div>
</body>
</html>

官方Demo代码：

<!DOCTYPE html>
<html  >
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
<meta name="viewport" content="width=620" />
<title>HTML5 Demo: geolocation</title>
<link rel="stylesheet" href="/css/html5demos.css" type="text/css" />
<script src="/js/h5utils.js"></script></head>
<body>
<section id="wrapper">
    <header>
      <h1>geolocation</h1>
    </header><meta name="viewport" content="width=620" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <article>
      <p>Finding your location: <span id="status">checking...</span></p>
    </article>
<script>
function success(position) {
  var s = document.querySelector('#status');
  
  if (s.className == 'success') {
    // not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back    
    return;
  }
  
  s.innerHTML = "found you!";
  s.className = 'success';
  
  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcanvas';
  mapcanvas.style.height = '400px';
  mapcanvas.style.width = '560px';
    
  document.querySelector('article').appendChild(mapcanvas);
  
  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var myOptions = {
    zoom: 15,
    center: latlng,
    mapTypeControl: false,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
  
  var marker = new google.maps.Marker({
      position: latlng, 
      map: map, 
      title:"You are here!"
  });
}

function error(msg) {
  var s = document.querySelector('#status');
  s.innerHTML = typeof msg == 'string' ? msg : "failed";
  s.className = 'fail';
  
  // console.log(arguments);
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  error('not supported');
}

</script><a id="html5badge" href="http://www.w3.org/html/logo/">

</a>
</section>


</body>
</html>

中文解说：

HTML5 Geolocation API 封装在 navigator.geolocation 属性里，各种接口即是 navigator.geolocation 对象的方法。 1、getCurrentPosition() getCurrentPosition 用来获取用户当前的位置信息，该方法带有三个参数：…

HTML5 Geolocation API 封装在 navigator.geolocation 属性里，各种接口即是 navigator.geolocation 对象的方法。

1、getCurrentPosition()

getCurrentPosition 用来获取用户当前的位置信息，该方法带有三个参数：

         1、successCallback：成功获取用户位置信息后的回调函数
         2、errorCallback：获取用户位置信息失败时的回调函数
         3、positionOptions：可选。获取用户位置信息的配置参数

i）、successCallback

      successCallback 函数带有一个参数，对象字面量格式，表示获取到的用户位置数据。该对象包含两个属性 coords 和 timestamp。其中 coords 属性包含以下7个值：
        1、accuracy：精确度
        2、latitude：纬度
        3、longitude：经度
        4、altitude：海拔
        5、altitudeAcuracy：海拔高度的精确度
        6、heading：朝向
        7、speed：

ii）、errorCallback

和 successCallback 函数一样带有一个参数，对象字面量格式，表示返回的错误代码。它包含以下两个属性：

           1、message：错误信息
           2、code：错误代码。
       其中错误代码包括以下四个值：
           0 — UNKNOW_ERROR：表示不包括在其它错误代码中的错误，这里可以在 message 中查找错误信息
           1 — PERMISSION_DENIED：表示用户拒绝浏览器获取位置信息的请求
       2 — POSITION_UNAVALIABLE：表示网络不可用或者连接不到卫星
           3 — TIMEOUT：表示获取超时。必须在options中指定了timeout值时才有可能发生这种错误

iii）、positionOptions

       positionOptions 的数据格式为JSON，有三个可选的属性：
        1、enableHighAcuracy — 布尔值：表示是否启用高精确度模式，如果启用这种模式，浏览器在获取位置信息时可能需要耗费更多的时间。
        2、timeout — 整数：表示浏览需要在指定的时间内获取位置信息，否则触发errorCallback。
        3、maximumAge — 整数/常量：表示浏览器重新获取位置信息的时间间隔。

2、watchPosition()

watchPosition 的三个参数和 getCurrentPosition 完全一样，不同的是 watchPosition 是设计用来实时获取＼检测用户的位置信息。它像一个追踪器一样时刻监视用户的位置，只要发生变化，浏览器就会触发 watchPosition 的回调函数。成功则触发 successCallback ，否则触发 errorCallback。

另外和 getCurrentPosition 不同的地方就是有返回值。类似于延迟函数/间隔函数（setTimeout/setInterval）那样，返回一个 ID ，可以被清除掉。这里是用接下来介绍的 clearWatch 清除。

3、clearWatch()

接受一个 watchPosition 返回的 ID，功能是清除对用户位置的循环监视。

沈纵情

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 geolocaltion

我住在南京江宁区在竹山站和小龙湾站之间的谭桥，google地图好像老旧了，呵呵，官方链接：http://html5.byends.com/geo 使用Geolocation定位当前位置并显示在Google地图上
复制链接

扫一扫