PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

html5 navigator.geolocation基于浏览器获取地理位置代码案例

黄舟
黄舟 原创
2017-04-01 11:15:10 2966浏览

一、简介

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

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

void getCurrentPosition(onSuccess,onError,options);
//获取用户当前位置

int watchCurrentPosition(onSuccess,onError,options);
//持续获取当前用户位置

void clearWatch(watchId);
//watchId 为watchCurrentPosition返回的值
//取消监控


options = {
     enableHighAccuracy,//boolean 是否要求高精度的地理信息
     timeout,//获取信息的超时限制
     maximumAge//对地理信息进行缓存的时间
}
//options可以不写,为默认即可

二、position对象

      当成功获取地理位置信息时候,onsuccess方法中会返回position对象,通过这个对象可以获取地理位置的相关信息,包括:

position对象的属性:
 
latitude,//纬度

longitude,//经度

altitude,//海拔高度

accuracy,//获取纬度或者经度的精度

altitudeAccurancy,//海拔高度的精度

heading,//设备前景方向。正北方向的顺时针旋转角

speed,//设备的前进速度 m/s

timestamp,//获取地理位置信息时候的时间

三、基于google map的例子

      直接看代码:




    
    在页面上使用google地图示例

    
                  function init(){             if(navigator.geolocation){                 navigator.geolocation.getCurrentPosition(function(pos){                         var coords = pos.coords;                         var latlng =new google.maps.LatLng(coords.latitude,coords.longitude);                         var options = {zoom:14,center:latlng,mapTypeId : google.maps.MapTypeId.ROADMAP};                         var map1;                         map1 =new google.maps.Map(document.getElementById('map'),options);                         var marker =new google.maps.Marker({                                 position : latlng,                                 map : map1                                 });                         var infowindow =new google.maps.InfoWindow({                                content : '当前位置!'                                });                         infowindow.open(map1,marker);                         });             }         }          

以上就是html5 navigator.geolocation基于浏览器获取地理位置代码案例的详细内容,更多请关注php中文网其它相关文章!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
上一条:html5 WebSocket在jetty7中实现的代码分享 下一条:动手打造html5俄罗斯方块的(图文)

相关文章

查看更多