利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
来源: 阅读:2337 次 日期:2016-07-22 15:23:07
温馨提示: 小编为您整理了“利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位”,方便广大网友查阅!

刚开始学习HTML5,现在对其中的Geolocation颇感兴趣,结合Google Map的API实现基本的地图定位功能主要是由以下几个步骤:获取当前地理位置、调用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的脚本文件,导入方法如下所示。

代码如下:

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

代码如下:

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

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

代码如下:

获取当前位置并显示在google地图上

Baidu
map

更多信息请查看 网页制作
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们| 联系我们| 人才招聘| 网站声明| 网站帮助| 非正式的简要咨询| 简要咨询须知| 新媒体/短视频平台| 手机站点| 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:
咨询QQ:1093837350(9:00—18:00) 版权所有:
云南网警报警专用图标
Baidu
map