前端开发日记一：网页定位两三事

最新推荐文章于 2024-06-08 22:56:05 发布

smok56888

最新推荐文章于 2024-06-08 22:56:05 发布

阅读量972

点赞数

本文链接：https://blog.csdn.net/smok56888/article/details/24987659

版权

最近开发的项目用要实现在网页上进行定位、以及地址解析的工作，通过查找各方面资料，总算完成了需求。现在将开发过程中用到的方法记录一下，以备后用。

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 οnlοad=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，是HTML5提供的API，已经被主流浏览器支持

提供的函数包括：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 οnlοad="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>