前端开发日记一：网页定位两三事
最近开发的项目用要实现在网页上进行定位、以及地址解析的工作，通过查找各方面资料，总算完成了需求。现在将开发过程中用到的方法记录一下，以备后用。
1、页面如何定位？
页面定位的途径有很多，常用的包括：利用IP定位，利用GPS定位
ip定位：利用开放的接口通过ip来进行定位，定位的准确性比较低。这里给一个例子，利用的是第三方接口进行ip解析。
<html>
<head>
<title>xxxxx</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script type="text/javascript" src="http://www.ip-look-up.com/Services/ipInfo.js"></script>
</head>
<body onload=aa();>
<SCRIPT LANGUAGE="JavaScript">
function aa(){
document.getElementById("lat").value = ipLocation.latitude;
document.getElementById("long").value = ipLocation.longitude;
document.getElementById("city").value = ipLocation.address.city;
document.getElementById("long").value = ipLocation.longitude;
document.getElementById("code").value = ipLocation.address.country_code;
document.getElementById("region").value = ipLocation.address.region;
document.getElementById("country").value = ipLocation.address.country;
}
</SCRIPT>
经度：<input type="text" id="lat"><br/>
纬度：<input type="text" id="long"><br/>
城市：<input type="text" id="city"><br/>
国家代码：<input type="text" id="code"><br/>
城市所属地区：<input type="text" id="region"><br/>
国家：<input type="text" id="country"><br/>
</body>
</html>
提供的函数包括：geolocation.getCurrentPosition，查看当前位置；geolocation.watchPosition，不断的读取位置信息。两个function的paramas是相同的，都是成功调用success，失败调用error（https://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocation）。
使用之前要先检查浏览器是否支持
<script type="text/javascript">
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError);
}else{
alert("您的浏览器不支持Geolocation!");
}
</script>
以及调用成功和失败的回调函数
<script type="text/javascript">
function getPositionSuccess(position){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
document.write("所在位置： 经度(" + lat + ")，纬度(" + lng + ")");
if(typeof position.address !== "undefined"){
var country = position.address.country;
var province = position.address.region;
var city = position.address.city;
document.write("<br />");
document.write("您位于" + country + province + city);
}
}
function getPositionError(error){
switch(error.code){
case error.TIMEOUT:
alert("连接超时，请重试");
break;
case error.PERMISSION_DENIED:
alert("您拒绝了使用位置共享服务，查询已取消");
break;
case error.POSITION_UNAVAILABLE:
alert("非常抱歉，我们暂时无法为您所在的星球提供位置服务");
break;
}
}
</script>
2、在获取到了经纬度之后，怎么才能解析出来对应的地址呢
对经纬度进行解析的工作称为 反向地理编码（地址查询）
常见的做法是通过第三方API来解析，比如google map提供的API
http://maps.googleapis.com/maps/api/geocode/json?sensor=false&latlng=40.754224,116.701452&&language=zh-CN
后边有几个参数：
latlng：经纬度，已经用半角逗号链接
sensor：是否是gps传感器，可选true或者false
language：如果不指定语言参数，则返回信息的语言不确定，最好加上。
根据返回的结果就可以获取到城市、行政区、街道等信息了。
用baidu提供的API也可以实现，但是貌似要麻烦一些，具体可以参考这里
最后附一个完整定位的例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>navigator定位测试</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function detectLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError);
}else{
alert("您的浏览器不支持Geolocation!");
}
}
function getPositionSuccess(position){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
$('#latitude').val(lat);
$('#longitude').val(lng);
$.ajax({
type:'get',
url:'http://maps.googleapis.com/maps/api/geocode/json',
data:'latlng='+lat+','+lng+'&sensor=true&language=zh-CN',
dataType:'json',
success:function(msg){
if(msg.status=='OK'){
for(var i=0;i<msg.results[0].address_components.length;i++){
if(msg.results[0].address_components[i].types[0]=='route'){
$('#route').val(msg.results[0].address_components[i].long_name);
}else if(msg.results[0].address_components[i].types[0]=='sublocality'){
$('#sublocality').val(msg.results[0].address_components[i].long_name);
}else if(msg.results[0].address_components[i].types[0]=='locality'){
$('#locality').val(msg.results[0].address_components[i].long_name);
}else if(msg.results[0].address_components[i].types[0]=='administrative_area_level_1'){
$('#administrative_area_level_1').val(msg.results[0].address_components[i].long_name);
}else if(msg.results[0].address_components[i].types[0]=='country'){
$('#country').val(msg.results[0].address_components[i].long_name);
}
}
}else{
alert(msg.status);
}
}
})
}
function getPositionError(error){
switch(error.code){
case error.TIMEOUT:
alert("连接超时，请重试");
break;
case error.PERMISSION_DENIED:
alert("您拒绝了使用位置共享服务，查询已取消");
break;
case error.POSITION_UNAVAILABLE:
alert("非常抱歉，我们暂时无法为您所在的星球提供位置服务");
break;
}
}
</script>
</head>
<body onload="detectLocation()">
维度：<input type="text" id="latitude" /><br />
经度：<input type="text" id="longitude" /><br />
国家：<input type="text" id="country" /><br />
省份：<input type="text" id="administrative_area_level_1" /><br />
城市：<input type="text" id="locality" /><br />
县/区：<input type="text" id="sublocality" /><br />
路：<input type="text" id="route" />
</body>
</html>