• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
老橡树1 显示全部楼层 发表于 2021-10-25 19:00:17 |阅读模式 打印 上一主题 下一主题
本小菜刚开始学习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 id="map" style="width: 800px; height: 600px"></div>
</body>
</html>

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作