利用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的脚本文件，导入方法如下所示。

复制代码

代码如下:

其次，设定地图参数，设定方法如下所示。

复制代码

代码如下:

//指定一个google地图上的坐标点，同时指定该坐标点的横坐标和纵坐标
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
zoom: 14, //设定放大倍数
center: latlng, //将地图中心点设定为指定的坐标点
mapTypeId: google.maps.MapTypeId.ROADMAP //指定地图类型
};

最后，创建地图，并在页面中显示，创建方法如下所示

Deep Agent

一款AI办公效率工具，主要用于一站式人工智能决策解决方案平台，适合需要提升相关任务效率的用户。

下载

复制代码

代码如下:

//创建地图，并在页面map中显示
var map = new google.maps.Map(document.getElementById("map"), myOptions);

最后的最后，献上本次示例所有代码。代码如下所示。

复制代码

代码如下:

获取当前位置并显示在google地图上
<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: "当前位置： 经度：" + latlng.lat() + " 维度：" + 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>