您的位置：首页 > Web前端 > JavaScript

使用JS获取当前地理位置方法汇总（如用谷歌接口，会出再以上报错，必须申请密钥并设置接受服务器IP！！！）

2017-05-09 11:51 836 查看

RefererNotAllowedMapError

错误

加载 Google Maps JavaScript API 的当前 URL 尚未添加到允许的引用站点列表中。请在 Google API Console 上检查您的 API 密钥的引用站点设置。

请参阅 Google API Console 中的 API 密钥。如需了解详细信息，请参阅 API 密钥安全使用最佳实践。

如用谷歌接口，会出再以上报错，必须申请密钥并设置接受服务器IP！！！

点击事件必须在initMap()中

function initMap() {
geocoder = new google.maps.Geocoder();
document.getElementById('submit').addEventListener('click', function() {
getCity();
});
}

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）；

获取不到位置信息（属性值为2）；

获取信息超时错误（属性值为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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航