利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2016-07-22来源:易贤网

刚开始学习HTML5,现在对其中的Geolocation颇感兴趣,结合Google Map的API实现基本的地图定位功能主要是由以下几个步骤:获取当前地理位置、调用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>

推荐信息