本小菜刚开始学习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>
相关推荐
本小菜刚开始学习HTML5,现在对其中的Geolocation颇感兴趣,结合Google Map的API实现基本的地图定位功能主要是由以下几个步骤:获取当前地理位置、调用Google Map API获取当前位置信息
This concise book demonstrates the W3C Geolocation API in action, with code and examples to help you build HTML5 apps using the "write once, deploy everywhere" model. Along the way, you get a crash ...
地理位置流星演示 一个使用将用户位置数据发送到集合的应用程序,该集合随后用于在上显示用户位置。 这是我在周末的一部分时间里对概念的快速证明。 它使我可以更深入地研究框架以及 API。
此IP地理位置搜索可帮助您快速找到您的IP地址的物理位置。 此IP地理位置搜索旨在帮助您快速找到IP地址的物理位置。它显示在Google Map上,并且可以找到有关IP地址的更多详细信息。 支持语言:English
–在html5中,为我们提供了navigator.geolocation.getCurrentPosition(f1, f2)函数,f1是定位成功调用的函数,f2是定位失败调用的函数,而且会把当前的地理位置信息作为实参传递给f1和f2函数。f1函数调用谷歌地图的...
地理热图这是一个脚本,可使用Python,Folium和OpenStreetMap从您的Google位置历史记录数据生成交互式地理热图。 入门1.安装Python 3+(如果您不满意)Geo Heatmap这是一个脚本,可使用Python,Folium和OpenStreet...
3:添加地理位置插件 cordova plugin add cordova-plugin-geolocation该cordova plugin add cordova-plugin-geolocation的文档可以在以下位置找到: : 4:Google Map JavaScript库 暂时不要添加此代码,此应用程序...
语言:English 此IP地理位置搜索旨在帮助您快速找到IP地址的物理位置。 此IP地理位置搜索旨在帮助您快速找到IP地址的物理位置。 它显示在Google Map上,并且可以找到有关IP地址的更多详细信息。
通过Ant Design,GeoLocation API和Google Map API实现了“创建帖子”,“画廊附近的帖子”和“地图中附近的帖子”等功能。 该项目是通过引导的。 可用脚本 在项目目录中,可以运行: npm start 在开发模式下运行...