头闻号

广州市海蒂化妆品有限公司

化妆品套装|护肤膏霜|洗面奶|化妆水|面膜|护肤乳液

首页 > 新闻中心 > 科技常识:利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
科技常识:利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
发布时间:2024-11-09 09:37:45        浏览次数:5        返回列表

今天小编跟大家讲解下有关利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位 的相关资料,希望小伙伴们看了有所帮助。

本小菜刚开始学习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.用户拒绝了位置服务(属性值为1); 2.获取不到位置信息(属性值为2); 3.获取信息超时错误(属性值为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>

来源:爱蒂网