如何利用HTML5中Geolocation获取地理位置调用

这篇文章主要介绍如何利用HTML5中Geolocation获取地理位置调用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联公司是一家专注于成都网站设计、成都网站制作与策划设计,吉利网站建设哪家好?创新互联公司做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:吉利等地区。吉利做网站价格咨询:13518219792

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的脚本文件，导入方法如下所示。

其次，设定地图参数，设定方法如下所示。

复制代码 代码如下:www.mb5u.com

//指定一个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);

最后的最后，献上本次示例所有代码。代码如下所示。

以上是“如何利用HTML5中Geolocation获取地理位置调用”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！