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

百变鹏仔 2个月前 (10-18) #H5教程

文章标签地理位置

一、简介

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/stimestamp,//获取地理位置信息时候的时间

三、基于google map的例子

直接看代码：

<!DOCTYPE HTML><html><head>    <meta charset="UTF-8">    <title>在页面上使用google地图示例</title></head><body onload = &#39;init()&#39;>    <div id="map" style=&#39;width:800px;height:800px;&#39;></div>    <script type="text/javascript" src=&#39;http://maps.google.com/maps/api/js?sensor=false&#39;></script>    <script type="text/javascript">        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(&#39;map&#39;),options);                        var marker =new google.maps.Marker({                                position : latlng,                                map : map1                                });                        var infowindow =new google.maps.InfoWindow({                               content : &#39;当前位置！&#39;                               });                        infowindow.open(map1,marker);                        });            }        }    </script>    </body></html>

文章推荐

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

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集