运用HTML5中Geolocation获得自然地理部位启用Google

日期:2021-02-26 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

本小菜一开始学习培训HTML5,如今对在其中的Geolocation颇感兴趣爱好,融合Google Map的API完成基础的地形图精准定位作用。
1.获得当今自然地理部位
启用方式 void getCurrentPosition(onSuccess, onError, options);便可。
在其中onSuccess是获得当今部位信息内容取得成功时实行的回调函数涵数,onError是获得当今部位信息内容不成功时所实行的回调函数涵数,options是1些可选熟习目录。在其中第2和第3个主要参数为可选特性。
在onSuccess回调函数涵数中,用到了主要参数position,意味着1个实际的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>

其次,设置地形图主要参数,设置方式以下所示。

拷贝编码
编码以下:

//特定1个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⑻" />
<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);
//特定1个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>
上一篇:html5 自定播发器关键编码 返回下一篇:没有了