Geolocation获取地理定位

当今技术定位的方式，有位置信息来源定位，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("获取地址失败");

}

});

//google

$.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