Geolocation地理定位
有关地理位置的获取和Google Maps API
1. W3C 中新添加了一个名为 Geolocation的 API 规范，Geoloaction API的作用就是通过浏览器获取用户的地理位置。我们可以使用navigator.geolocation来获取用户的地理位置信息。
获取当前地理位置的方法navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)
其中success_callback_function为成功之后处理的函数，error_callback_function为失败之后返回的处理函数，参数position_options是配置项，可选,有三个值可设定：
enableHighAccuracy：是否启用高精度设备（高精度设备包含但不局限于前面所提到的 GPS 和 WIFI）
maximumAge：数值,如果将其定义为负数或者未定义，会重设为0
timeout：数值,请求获取地理信息时的超时时间，如果将其定义为负数会重设为0，如果未定义则不启用超时判断
2. google maps API的使用：
根据经纬度，用google.maps.LatLng在地图上确定地点。
通过google.maps.Map获取地图，可以用zoom option调节显示的比例尺。
通过google.maps.Marker标示地图上的点。
3. GPS定位的方法..
在navigator.geolocation.getCurrentPosition调用中增加了enableHighAccuracy的指定，如下：
navigator.geolocation.getCurrentPosition(hasPosition, positionError, { enableHighAccuracy:true });
简单的例子:
1. W3C 中新添加了一个名为 Geolocation的 API 规范，Geoloaction API的作用就是通过浏览器获取用户的地理位置。我们可以使用navigator.geolocation来获取用户的地理位置信息。
获取当前地理位置的方法navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)
其中success_callback_function为成功之后处理的函数，error_callback_function为失败之后返回的处理函数，参数position_options是配置项，可选,有三个值可设定：
enableHighAccuracy：是否启用高精度设备（高精度设备包含但不局限于前面所提到的 GPS 和 WIFI）
maximumAge：数值,如果将其定义为负数或者未定义，会重设为0
timeout：数值,请求获取地理信息时的超时时间，如果将其定义为负数会重设为0，如果未定义则不启用超时判断
2. google maps API的使用：
根据经纬度，用google.maps.LatLng在地图上确定地点。
通过google.maps.Map获取地图，可以用zoom option调节显示的比例尺。
通过google.maps.Marker标示地图上的点。
3. GPS定位的方法..
在navigator.geolocation.getCurrentPosition调用中增加了enableHighAccuracy的指定，如下：
navigator.geolocation.getCurrentPosition(hasPosition, positionError, { enableHighAccuracy:true });
简单的例子:
<!DOCTYPE html>
<meta charset="utf-8" />
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>GeoGoogleMapTest</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
if(navigator.geolocation) {
function hasPosition(position) {
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
myOptions = {
zoom: 15,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
mapDiv = document.getElementById("mapDiv"),
map = new google.maps.Map(mapDiv, myOptions),
marker = new google.maps.Marker({
position: point,
map: map,
title: "You are here"
});
}
function positionError(error)
{
// do error handling
}
//navigator.geolocation.getCurrentPosition(hasPosition);
navigator.geolocation.getCurrentPosition(hasPosition, positionError, { enableHighAccuracy:true });
}
</script>
<style>
#mapDiv {
width:320px;
height:460px;
border:1px solid #efefef;
margin:auto;
-moz-box-shadow:5px 5px 10px #000;
-webkit-box-shadow:5px 5px 10px #000;
}
</style>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>