当前位置: 首页 > Web前端 > HTML

HTML5获取地理定位信息

时间:2023-04-02 18:55:55 HTML

使用HTML5获取地理定位信息如何使用HTML5地理定位功能地理定位是HTML5的新特性,所以只能在支持HTML5的现代浏览器上运行,尤其是iphone等手持设备,地理定位是更确切。首先我们需要检测用户的设备浏览器是否支持地理定位,如果支持则获取地理信息。请注意,此功能可能会侵犯用户隐私。除非用户同意,否则用户的位置信息将不可用,因此我们会在访问应用时提示是否允许地理定位。当然,我们可以选择允许。functiongetLocation(){  if(navigator.geolocation){  navigator.geolocation.getCurrentPosition(showPosition,showError);  }else{  alert(\\\"浏览器不支持地理定位。\\\");  }  }上面的代码知道如果用户的设备支持地理定位,那么运行getCurrentPosition()方法。如果getCurrentPosition()运行成功,会返回一个坐标对象给参数showPosition指定的函数,getCurrentPosition()方法的第二个参数showError用于处理错误,指定获取用户位置时运行的函数失败。我们先看函数showError(),它规定了获取用户地理位置失败时的一些错误码处理方法:alert(\\\"定位失败,用户拒绝地理定位请求\\\");  休息;  caseerror.POSITION_UNAVAILABLE:  alert(\\\"定位失败,定位信息不可用使用\\\");  break;  caseerror.TIMEOUT:  alert(\\\"定位失败,请求获取用户位置超时\\\");  break;  caseerror.UNKNOWN_ERROR:  alert(\\\"定位失败,定位系统失败\\\");  打破;  }}再看函数showPosition(),调用coords的经纬度获取用户的经纬度。函数显示位置(位置){  varlat=position.coords.latitude;//纬度  varlag=position.coords.longitude;//longitude  alert(\\\'latitude:\\\'+lat+\\\',longitude:\\\'+lag);  }利用百度地图和谷歌地图接口获取用户地址上面我们了解到HTML5Geolocation可以获取用户的经纬度,那么我们要做的就是将抽象的经纬度转换成可读的、有意义的真实用户地理位置信息。好在百度地图和谷歌地图都提供了这方面的接口。我们只需要将HTML5获取的经纬度信息传递给地图接口,它就会返回用户的地理位置信息,包括省市信息,甚至街道,门牌号等详细的地理位置信息。我们先在页面定义显示地理位置的div,分别定义id#baidu_geo和id#google_geo。我们只需要修改关键函数showPosition()即可。先来看百度地图界面交互。我们通过Ajax将经纬度信息发送到百度地图接口,接口会返回对应的省、市、街道信息。百度地图接口返回一串JSON数据,我们可以根据需要将需要的信息显示到div#baidu_geo中。注意这里使用了jQuery库,需要先加载jQuery库文件。functionshowPosition(position){  varlatlon=position.coords.latitude+\\\',\\\'+position.coords.longitude;  //baidu  varurl=\\\"http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location=\\\"+latlon+\\\"&output=json&pois=0\\\";  $.ajax({  键入:\\\"GET\\\",  dataType:\\\"jsonp\\\",  url:url,  beforeSend:function(){  $(\\\"#baidu_geo\\\").html(\\\'定位...\\\');  },  成功:function(json){  if(json.status==0){  $(\\\"#baidu_geo\\\").html(json.result.formatted_address);  }  },  error:function(XMLHttpRequest,textStatus,errorThrown){  $(\\\"#baidu_geo\\\").html(latlon+\\\"地址位置获取失败\\\");  }  });  });再来看看谷歌地图的界面交互。同样,我们将经纬度信息通过Ajax发送给GoogleMaps接口,接口会返回对应省市街道的详细信息。谷歌地图接口返回的也是一串JSON数据,比百度地图接口返回的更详细。我们可以根据需要将需要的信息显示到div#google_geo中。functionshowPosition(position){  varlatlon=position.coords.latitude+\\\',\\\'+position.coords.longitude;  //google  varurl=\\\'http://maps.google.cn/maps/api/geocode/json?latlng=\\\'+latlon+\\\'&language=CN\\\';  $.ajax({  type:\\\"GET\\\",  url:url,  beforeSend:function(){  $(\\\"#google_geo\\\").html(\\\'is定位...\\\');  },  成功:function(json){  if(json.status==\\\'OK\\\'){  var结果=json.results;  $.each(results,function(index,array){  if(index==0){  $(\\\"#google_geo\\\").html(array[\\\'formatted_address\\\']);  }  });  }  },  error:function(XMLHttpRequest,textStatus,errorThrown){  $(\\\"#google_geo\\\").html(latlon+\\\"获取地址位置失败\\\");  }  }); }以上代码分别连接百度地图接口和谷歌地图接口集成到函数showPosition()中,大家可以根据实际情况调用。当然,这只是一个简单的应用,我们可以基于这个简单的例子开发出很多复杂的应用。