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

纏綿敗給流年╰

纏綿敗給流年╰

2016-02-19 11:17

图老师小编精心整理的利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~
本小菜刚开始学习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
展开更多 50%)
分享

猜你喜欢

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

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

html5中地理位置定位api接口开发应用小结

Web开发
html5中地理位置定位api接口开发应用小结

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

10分钟学会Google Map API (二)

Web开发
10分钟学会Google Map API (二)

10分钟学会Google Map API (一)

Web开发
10分钟学会Google Map API (一)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jquery与google map api结合使用 控件,监听器

Web开发
jquery与google map api结合使用 控件,监听器

IOS入门笔记之地理位置定位系统

编程语言 网络编程
IOS入门笔记之地理位置定位系统

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Win7画图工具输入文字旋转90°修正方法

Win7画图工具输入文字旋转90°修正方法

Android启动模拟器报错解决方法

Android启动模拟器报错解决方法
下拉加载更多内容 ↓