地理定位API

地理定位API

地理定位API geolocation有三个方法：

• getCurrentPosition
• watchPosition
• clearWatch

getCurrentPosition

getCurrentPosition(successHandler,errorHandler,options)

参数：
successHandler：成功处理程序(或回调)会在确定位置时调用，并传入一个position对象。
errorHandler：错误处理程序会在浏览器无法确定其位置时调用。(可选)
options：利用这个参数可以调整地理位置的行为(可选)。

position对象始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

属性	描述
coords.latitude	十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米计
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，从正北开始以度计
coords.speed	速度，以米/每秒计
timestamp	响应的日期/时间

然后来看下getCurrentPosition方法的调用：

function getMyLocation() {
if(navigator.geolocation) {navigator.geolocation.getCurrentPosition(displayLocation,displayError，options);
}else{
alert("Oops,no geolocation support");
}
}
成功得到浏览器的位置后，调用displayLocation函数，将position对象传入，其中包含有关浏览器位置的信息，包括经纬度和精确度。

function displayLocation(position) {
var latitude=position.coords.latitude;
var longitude=position.coords.longitude;
var div=document.getElementById("location");
div.innerHTML="You are at Latitude:"+latitude+",longitude:"+longitude;
div.innerHTML+="(with"+position.coords.accuracy+"meters accuracy)";
}
在这里我们得到了坐标信息，并在页面中的一个div元素中显示。
再来看下getCurrentPosition的第二个参数，当地理定位未能成功找到位置时调用displayError这个函数，我们来编写这个函数;

function displayError(error) {
var errorType={
0: "Unknow error",
1: "Permission denied by user",
2: "Position is not available",
3: "Request timed out"
};
//对于错误0和2，有时error.message属性中会有一些额外的信息，所有把这些信息增加到errorMessage串
var errorMessage=errorType[error.code];
if(error.code==0 || error.code==2) {
errorMessage=errorMessage+" "+error.message;
}
var div=document.getElementById("location");
div.innerHTML=errorMessage;
}

地理定位会向这个函数传入一个错误error,error对象有一个code属性，其中包含一个0~3的数。我们创建一个对象把错误信息和error.code属性相关联。

再来看getCurrentPosition的第三个参数,options
options的三个选项及其默认值：

var options={
enableHighAccuracy:false,
timeout:Infinity,
maximumAge:0
}

这三个选项分别表示是否启动高精度、控制浏览器每次确定位置的时间间隔、限制浏览器查找位置的最大时间。

watchPosition和clearWatch方法

watchPosition方法会监视你的移动，并在位置改变时向你报告位置。方法和getCurrentPosition很像，clearWatch方法是用来清除监视行为的。

Google API

利用第三方工具Google Maps提供地图，首先要把这个API添加到HTML文件中：

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

sensor参数这里用的是true,这样可以用到你的位置，如果只是使用地图而不需要你的位置，可以输入sensor=false.
然后我们要向页面中显示这个地图，首先在HTML文件中创建一个div块并在CSS文件中设置好地图大小样式，来放置地图。

<div id="map">
</div>

创建地图我们需要经纬度以及另外一组选项来描述希望如何创建地图，我们之前已经利用地理定位API得到经纬度了，不过Google API希望纬度和经度包装在单独的对象中。药创建这样一个对象，可以使用Google提供的一个构造函数：

var googleLatAndLong=new google.maps.LatLng(latidude,longitude);

利用Google提供的一些选项，来控制如何创建地图，例如，可以控制初始地图视图的缩放程度、地图在哪居中、地图的类型（如道路地图、卫星地图、或者二者兼有）。

var mapOption={
    zoom: 10,
    center: googleLatAndLong,
    mapTypeId:google.maps.MapTypeId.ROADMAP   //选项值还可为SATELLITE和HYBRID
}

下面把这些代码放在一个新函数showMap中。

var map=null;
//声明一个全局变量，它包含我们将创建的Google地图
function showMap(coords) {
    //Google API提供的构造函数，创建一个对象，获取经纬度
var googleLatAndLong=new google.maps.LatLng(coords.latitude,coords.longitude);
//创建mapOption对象,设置选项来控制如何创建地图，如缩放程度，在哪居中，地图类型
var mapOption={
    zoom: 10,
    center: googleLatAndLong,
    mapTypeId:google.maps.MapTypeId.ROADMAP//选项值还可为SATELLITE和HYBRID
};
var mapDiv=document.getElementById("map");
//Google的API提供的另一个构造函数,获取元素和选项，创建并返回一个地图对象
map=new google.maps.Map(mapDiv,mapOption);
}

另外编辑displayLocation函数，在displayLocation中调用showMap函数，当displayLocation加载完成后立即调用showMap函数，显示地图：

showMap(position.coords);

这些做完之后通过加载页面，如果浏览器能确定你的位置那么你就能看到一个地图。