HTML5 Geolocation获取地理位置
来源:互联网 发布:大数据之路阿里巴巴pdf 编辑:程序博客网 时间:2024/06/11 13:36
本小菜刚开始学习HTML5,现在对其中的Geolocation颇感兴趣,结合Google Map的API实现基本的地图定位功能。
1.获取当前地理位置
调用方法 void getCurrentPosition(onSuccess, onError, options);即可。
其中onSuccess是获取当前位置信息成功时执行的回调函数,onError是获取当前位置信息失败时所执行的回调函数,options是一些可选熟悉列表。其中第二和第三个参数为可选属性。
在onSuccess回调函数中,用到了参数position,代表一个具体的position对象,表示当前位置。其具有如下属性:
- latitude:当前地理位置的纬度。
- longitude:当前地理位置的经度。
- altitude:当前位置的海拔高度(不能获取时为null)。
- accuracy:获取到的纬度和经度的精度(以米为单位)。
- altitudeAccurancy:获取到的海拔高度的经度(以米为单位)。
- heading:设备的前进方向。用面朝正被方向的顺时针旋转角度来表示(不能获取时为null)。
- speed:设备的前进速度(以米/秒为单位,不能获取时为null)。
- timestamp:获取地理位置信息时的时间。
在onError回调函数中,用到了error参数。其具有如下属性:
- code:错误代码,有如下值。
- 用户拒绝了位置服务(属性值为1);
- 获取不到位置信息(属性值为2);
- 获取信息超时错误(属性值为3)。
- message:字符串,包含了具体的错误信息。
在options参数中,可选属性如下:
- enableHighAccuracy:是否要求高精度的地理位置信息。
- timeout:设置超时时间(单位为毫秒)。
- maximumAge:对地理位置信息进行缓存的有效时间(单位为毫秒)。
其中注意要写上如下代码,判断浏览器是否支持HTML5获取地理位置信息,以兼容较早不支持的浏览器。
if (navigator.geolocation) { //获取当前地理位置信息 navigator.geolocation.getCurrentPosition(onSuccess, onError, options); } else { alert("你的浏览器不支持HTML5来获取地理位置信息。");}
2.调用Google Map API获取当前位置信息
首先,需要在页面中引用Google Map API的脚本文件,导入方法如下所示。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
其次,设定地图参数,设定方法如下所示。
//指定一个google地图上的坐标点,同时指定该坐标点的横坐标和纵坐标var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);var myOptions = { zoom: 14, //设定放大倍数 center: latlng, //将地图中心点设定为指定的坐标点 mapTypeId: google.maps.MapTypeId.ROADMAP //指定地图类型};
最后,创建地图,并在页面中显示,创建方法如下所示。
//创建地图,并在页面map中显示var map = new google.maps.Map(document.getElementById("map"), myOptions);
最后的最后,献上本次示例所有代码。代码如下所示。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>获取当前位置并显示在google地图上</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function init() { if (navigator.geolocation) { //获取当前地理位置 navigator.geolocation.getCurrentPosition(function (position) { var coords = position.coords; //console.log(position); //指定一个google地图上的坐标点,同时指定该坐标点的横坐标和纵坐标 var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); var myOptions = { zoom: 14, //设定放大倍数 center: latlng, //将地图中心点设定为指定的坐标点 mapTypeId: google.maps.MapTypeId.ROADMAP //指定地图类型 }; //创建地图,并在页面map中显示 var map = new google.maps.Map(document.getElementById("map"), myOptions); //在地图上创建标记 var marker = new google.maps.Marker({ position: latlng, //将前面设定的坐标标注出来 map: map //将该标注设置在刚才创建的map中 }); //标注提示窗口 var infoWindow = new google.maps.InfoWindow({ content: "当前位置:<br/>经度:" + latlng.lat() + "<br/>维度:" + latlng.lng() //提示窗体内的提示信息 }); //打开提示窗口 infoWindow.open(map, marker); }, function (error) { //处理错误 switch (error.code) { case 1: alert("位置服务被拒绝。"); break; case 2: alert("暂时获取不到位置信息。"); break; case 3: alert("获取信息超时。"); break; default: alert("未知错误。"); break; } }); } else { alert("你的浏览器不支持HTML5来获取地理位置信息。"); } } </script></head><body onload="init()"> <div id="map" style="width: 800px; height: 600px"></div></body></html>
0 0
- HTML5 Geolocation获取地理位置
- Html5 Geolocation获取地理位置信息
- Html5 Geolocation获取地理位置信息
- HTML5 Geolocation API (地理位置应用程序接口)获取地理位置
- HTML5 Geolocation 地理位置 - 6
- H5+GeoLocation获取地理位置
- 获取地理位置-Geolocation
- 使用HTML5-geolocation以及 IP 获取地理位置信息
- Html5 系列之:地理位置Geolocation
- HTML5地理位置定位 Geolocation API
- HTML5 地理位置定位(HTML5 Geolocation)
- HTML5 地理位置定位(HTML5 Geolocation)
- HTML5 地理位置定位(HTML5 Geolocation)
- HTML5 之Geolocation API (地理位置应用程序接口)
- HTML5地理位置Geolocation以及百度地图应用
- 利用HTML5中Geolocation获取地理位置在Google Map上定位
- 使用navigator对象的geolocation获取地理位置
- Geolocation地理位置
- CF 346B Lucky Common Subsequence(LCS+KMP)
- 学习getaddrinfo
- [Boost]_[使用boost正则表达式查找所有字符串]
- IplImage结构及与其相关的读写函数
- 一致性hash算法 - consistent hashing
- HTML5 Geolocation获取地理位置
- Javascript中的<!-- //-->
- 【c#】problems when connect baidu content API
- HDU 3829 最大du立集=2个点集点数-最大匹配数
- 一个合格的程序员应该读过哪些书(留给自己看的)
- 页面自适应
- 嵌套矩形(算法竞赛入门经典第九章)
- POJ 2689 Prime Distance 解题报告(素数筛)
- 左右值无限分类实现算法