本小菜刚开始进修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>
<div></div>
</body>
</html>
（编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
