當今技術(shù)定位的方式壮莹，有位置信息來源定位姻檀，IP定位，GPS定位周荐，WIFI定位僵娃，手機定位和自定義定位。本文通過獲取經(jīng)緯度默怨，使用各地圖提供的接口再獲取準確的街道位置信息，并做一個比較
①入門-獲取經(jīng)緯度
JS
function Location(){ ? //函數(shù)名location關(guān)鍵字
if(navigator.geolocation) ? //檢測當前設備是否支持H5Geolocation API
{
navigator.geolocation.getCurrentPosition(showmap,error);
//檢測結(jié)果存在地理定位對象的話愚屁，navigator.geolocation調(diào)用將返回該對象
//第一個參數(shù)獲取當前地理信息成功是執(zhí)行的回調(diào)函數(shù)，帶3個參數(shù)送浊，
//第一個參數(shù)是必寫的丘跌，表示獲取當前地理位置信息成功時所執(zhí)行的回調(diào)函數(shù)，該函數(shù)參數(shù)position也是必須耸棒。
//第二個參數(shù)是獲取地理位置信息失敗的回調(diào)函數(shù)报辱，該函數(shù)的參數(shù)error也是必寫的，第三個參數(shù)是一些可選屬性列表（2碍现、3個參數(shù)可省略）
}
else{
alert("該瀏覽器不支持獲取地理位置");
}
}
function showmap(position){ ? ? ? //.強調(diào)coords
var cords = position.coords;
var latitude = cords.latitude; ? ? ?//獲取緯度
var longitude = cords.longitude; ? ?//獲取經(jīng)度
var xy=document.getElementById("map");
xy.innerHTML="當前位置："+"
"+"latitude:"+latitude+"
"+"longitude:"+longitude;
}
function error(error){ ? ? ? ? ? //.強調(diào)code
var err = error.code;
switch(err){
case 1:alert("用戶拒絕了位置服務");
case 2:alert("獲取不到位置信息");
case 3:alert("獲取信息超時");
}
}
Location(); //記得在最后執(zhí)行一下調(diào)用就好了
HTML
<button onClick="Location()">點擊獲取地址</button>
②返回街道信息
HTML
<p>經(jīng)緯度：</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);
//檢測結(jié)果存在地理定位對象的話衣屏，navigator.geolocation調(diào)用將返回該對象
//第一個參數(shù)獲取當前地理信息成功是執(zhí)行的回調(diào)函數(shù)辩棒，帶3個參數(shù)膨疏，
//第一個參數(shù)是必寫的，表示獲取當前地理位置信息成功時所執(zhí)行的回調(diào)函數(shù)者吁，該函數(shù)參數(shù)position也是必須饲帅。
//第二個參數(shù)是獲取地理位置信息失敗的回調(diào)函數(shù)，該函數(shù)的參數(shù)error也是必寫的灶泵，第三個參數(shù)是一些可選屬性列表（2赦邻、3個參數(shù)可省略）
}
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是一個字符串，包含此位置的人類可讀地址按声。通常該地址相當于“郵政地址”，有時會因不同國家/地區(qū)而存在差異签则。
},
error:function(XMLHttpRequest,textStatus, errorThrown){
//$("#baidu_geo").html(latlon+"地址位置獲取失敗");
document.getElementById("baidu_street").innerHTML=
"請求對象XMLHttpRequest: "+XMLHttpRequest+"
"+"錯誤類型textStatus: "+textStatus+"
"+"異常對象errorThrown: "+errorThrown;
//三個參數(shù)：XMLHttpRequest 對象渐裂、錯誤信息、（可選）捕獲的異常對象芯义。
//如果發(fā)生了錯誤，錯誤信息（第二個參數(shù)）除了得到 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){
//當?shù)乩砭幋a器返回結(jié)果時，會將其放在一個 (JSON) results 數(shù)組中渴频。即使未返回任何結(jié)果（例如北启，如果地址不存在），
//地理編碼器仍然會返回一個空的 results 數(shù)組场钉。
if(index==0){ //數(shù)組的第一項是formatted_adress
//$("#google_street").html(item['formatted_address']);
document.getElementById("google_street").innerHTML=item['formatted_address'];
//formatted_address 是一個字符串懈涛，其中包含該位置的可人工讀取地址。通常該地址就相當于“郵政地址”宇植，有時會因國家/地區(qū)的不同而存在差異埋心。
}
});
}
},
error:function(XMLHttpRequest,textStatus,errorThrown){
document.getElementById("google_street").innerHTML="獲取地址失敗";
}
});
}
function error(error){ ? ? ? ? ? //強調(diào)code有3個返回值，分別代表不同的錯誤
var err = error.code;
switch(err){
case 1:alert("用戶拒絕了位置服務");
case 2:alert("獲取不到位置信息");
case 3:alert("獲取信息超時");
}
}
Location();
③接入高德地圖
HTML
<div id="wordsP">
p>您的經(jīng)緯度：
<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調(diào)了一小時沒看出來
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
*頭部一定要引入地圖相關(guān)的信息，否則獲取不了地圖
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,? ? ? //放大倍數(shù)
center: [lon,lat]? ? //中心點的經(jīng)緯度
});
}
getLocation();
2016.6.15
