本小菜刚开始学习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="/UploadFiles/2021-03-30/js?sensor=false">
其次，设定地图参数，设定方法如下所示。
复制代码代码如下:
//指定一个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="/UploadFiles/2021-03-30/js?sensor=false"><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>
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="/UploadFiles/2021-03-30/js?sensor=false">
其次，设定地图参数，设定方法如下所示。
复制代码代码如下:
//指定一个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="/UploadFiles/2021-03-30/js?sensor=false"><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>
标签：
Geolocation,地理位置
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com
暂无“利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位”评论...
更新日志
2024年11月15日
2024年11月15日
- s14全球总决赛目前是什么结果 s14全球总决赛赛程结果图一览
- s2TPA夺冠五人名单都有谁 tpa战队s2夺冠队员名单一览
- s13wbg战队成员都有谁 wbg战队s13成员名单一览
- 网友热议《幻兽帕鲁》停售、赔千万日元：那也赚麻了 不亏
- 这谁顶得住 《最终幻想7：重生》尤菲3D作品穿上终极芙蕾娜衣服
- 外媒称PS5pro违背承诺:《蜘蛛侠2》根本没法4K60帧
- 群星.2007－中文十大金曲30周年纪念专辑【RTHK】【WAV+CUE】
- 杨林.1989-留一点爱来爱自己【综一唱片】【WAV+CUE】
- 南合文斗.2007-陪君醉笑三千尘鸟人唱片】【FLAC+CUE】
- 群星《我们的歌第六季 第1期》[320K/MP3][90.72MB]
- 群星《我们的歌第六季 第1期》[FLAC/分轨][456.01MB]
- 李雨寰《Break Free》[320K/MP3][98.39MB]
- 草蜢.2001-《真经典》环球唱片[WAV+CUE]
- 群星.2009-第4届2008十大发烧唱片精选[FLAC+CUE]
- 丁红《女儿情》[DTS-WAV]