利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位


Posted in HTML / CSS onJanuary 23, 2013

本小菜刚开始学习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>
HTML / CSS 相关文章推荐
详解CSS3的perspective属性设置3D变换距离的方法
May 23 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
什么是css原子化,有什么用?
Apr 24 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 #HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 #HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 #HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 #HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 #HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 #HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 #HTML / CSS
You might like
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
解析php中const与define的应用区别
2013/06/18 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
利用Python如何生成随机密码
2016/04/20 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
护理自我鉴定范文
2013/10/06 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
元旦晚会策划方案
2014/02/18 职场文书
本科毕业生求职信
2014/06/15 职场文书
单位工作证明格式模板
2014/10/04 职场文书
情人节活动总结范文
2015/02/05 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
学历证明范文
2015/06/16 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python