当今技术定位的方式，有位置信息来源定位，IP定位，GPS定位，WIFI定位，手机定位和自定义定位。本文通过获取经纬度，使用各地图提供的接口再获取准确的街道位置信息，并做一个比较
①入门-获取经纬度
JS
function Location(){ //函数名location关键字
if(navigator.geolocation) //检测当前设备是否支持H5Geolocation API
{
navigator.geolocation.getCurrentPosition(showmap,error);
//检测结果存在地理定位对象的话，navigator.geolocation调用将返回该对象
//第一个参数获取当前地理信息成功是执行的回调函数，带3个参数，
//第一个参数是必写的，表示获取当前地理位置信息成功时所执行的回调函数，该函数参数position也是必须。
//第二个参数是获取地理位置信息失败的回调函数，该函数的参数error也是必写的，第三个参数是一些可选属性列表（2、3个参数可省略）
}
else{
alert("该浏览器不支持获取地理位置");
}
}
function showmap(position){ //.强调coords
var cords = position.coords;
var latitude = cords.latitude; //获取纬度
var longitude = cords.longitude; //获取经度
var xy=document.getElementById("map");
xy.innerHTML="当前位置："+"
"+"latitude:"+latitude+"
"+"longitude:"+longitude;
}
function error(error){ //.强调code
var err = error.code;
switch(err){
case 1:alert("用户拒绝了位置服务");
case 2:alert("获取不到位置信息");
case 3:alert("获取信息超时");
}
}
Location(); //记得在最后执行一下调用就好了
HTML
<button onClick="Location()">点击获取地址</button>
②返回街道信息
HTML
<p>经纬度：</p>
<p id="coordinates"></p>
<p>百度地图定位位置</p>
<p>街道位置：</p>
<p id="baidu_street"></p>
<p>谷歌地图定位位置</p>
<p>街道位置：</p>
<p id="google_street"></p>
JS
function Location(){
if(navigator.geolocation) //检测当前设备是否支持H5Geolocation API
{
navigator.geolocation.getCurrentPosition(showPosition,error);
//检测结果存在地理定位对象的话，navigator.geolocation调用将返回该对象
//第一个参数获取当前地理信息成功是执行的回调函数，带3个参数，
//第一个参数是必写的，表示获取当前地理位置信息成功时所执行的回调函数，该函数参数position也是必须。
//第二个参数是获取地理位置信息失败的回调函数，该函数的参数error也是必写的，第三个参数是一些可选属性列表（2、3个参数可省略）
}
else{
alert("该浏览器不支持获取地理位置");
}
}
function showPosition(position){
var latlng=position.coords.latitude+","+position.coords.longitude;
document.getElementById("coordinates").innerHTML=latlng;
var url="http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlng+"&output=json&pois=0";
$.ajax({
type:"GET",
dataType:"jsonp",
url:url,
beforeSend: function(){
document.getElementById("baidu_street").innerHTML="正在定位...";
},
success:function(json){
if(json.status=='0'){
document.getElementById("baidu_street").innerHTML=json.result.formatted_address;}
//将JSON返回的地址信息解析赋给id为google_street的p标签
//formatted_address是一个字符串，包含此位置的人类可读地址。通常该地址相当于“邮政地址”，有时会因不同国家/地区而存在差异。
},
error:function(XMLHttpRequest,textStatus, errorThrown){
//$("#baidu_geo").html(latlon+"地址位置获取失败");
document.getElementById("baidu_street").innerHTML=
"请求对象XMLHttpRequest: "+XMLHttpRequest+"
"+"错误类型textStatus: "+textStatus+"
"+"异常对象errorThrown: "+errorThrown;
//三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
//如果发生了错误，错误信息（第二个参数）除了得到 null 之外，
//还可能是 "timeout", "error", "notmodified" 和 "parsererror".这是一个 Ajax 事件。
}
});
var url = 'http://maps.google.cn/maps/api/geocode/json?latlng='+latlng+'&language=CN';
$.ajax({
type:"GET",
url:url,
beforeSend:function(){
document.getElementById("google_street").innerHTML="正在定位...";
},
success:function(json){
if(json.status=='OK'){
$.each(json.results,function(index,item){
//当地理编码器返回结果时，会将其放在一个 (JSON) results 数组中。即使未返回任何结果（例如，如果地址不存在），
//地理编码器仍然会返回一个空的 results 数组。
if(index==0){ //数组的第一项是formatted_adress
//$("#google_street").html(item['formatted_address']);
document.getElementById("google_street").innerHTML=item['formatted_address'];
//formatted_address 是一个字符串，其中包含该位置的可人工读取地址。通常该地址就相当于“邮政地址”，有时会因国家/地区的不同而存在差异。
}
});
}
},
error:function(XMLHttpRequest,textStatus,errorThrown){
document.getElementById("google_street").innerHTML="获取地址失败";
}
});
}
function error(error){ //强调code有3个返回值，分别代表不同的错误
var err = error.code;
switch(err){
case 1:alert("用户拒绝了位置服务");
case 2:alert("获取不到位置信息");
case 3:alert("获取信息超时");
}
}
Location();
③接入高德地图
HTML
<div id="wordsP">
p>您的经纬度：
<p id="latlon"></p>
<p>百度地图</p>
<p id="baidu_position"></p>
<p>谷歌地图</p>
<p id="google_position"></p>
</div>
<a href="map.html">点击查看高德地图</a>
js
function getLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showordP,error);
}
else{
alert("该浏览器不支持地理定位");
}
}
function showordP(position){
var latlng = position.coords.latitude +","+position.coords.longitude;
$("#latlon").html(latlng);
//baidu
$.ajax({
type:"GET", //一定要引号！！
dataType:"jsonp",
url:"http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlng+"&output=json&pois=0",
beforeSend: function(){
$("#baidu_position").html('正在定位...');
},
success:function(json){
if(json.status=='0'){
$("#baidu_position").html(json.result.formatted_address);
}
},
error:function(XMLHttpRequest,textStatus,errorThrown){
$("#baidu_position").html("获取地址失败");
}
});
$.ajax({
type:"GET",
url:'http://maps.google.cn/maps/api/geocode/json?latlng='+latlng+'&language=CN',
beforeSend:function(){
$("#google_position").html('正在定位...');
},
success: function (json) {
if(json.status=='OK'){
$.each(json.results,function(index,array){ //呵我写成position.results调了一小时没看出来
if(index==0){
$("#google_position").html(array['formatted_address']);
}
});
}
},
error:function(XMLHttpRequest,textStatus,errorThrown){
$("#baidu_position").html("获取地址失败");
}
});
}
function error(err){
var x=err.code;
switch(x){
case 1:alert("用户拒绝了位置服务");
case 2:alert("获取不到位置信息");
case 3:alert("获取信息超时");
}
}
getLocation();
map.html
*头部一定要引入地图相关的信息，否则获取不了地图
http://cache.amap.com/lbs/static/addToolbar.js">
<div id="container"></div>
JS
function getLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(show);
}
}
function show(position){
var lon=position.coords.longitude;
var lat=position.coords.latitude;
var map = new AMap.Map('container', {
resizeEnable: true, //启用地图
zoom:16, //放大倍数
center: [lon,lat] //中心点的经纬度
});
}
getLocation();
2016.6.15
