HTML5实现获取地理位置信息并定位功能文档格式.docx
- 文档编号:22187217
- 上传时间:2023-02-03
- 格式:DOCX
- 页数:8
- 大小:15.99KB
HTML5实现获取地理位置信息并定位功能文档格式.docx
《HTML5实现获取地理位置信息并定位功能文档格式.docx》由会员分享,可在线阅读,更多相关《HTML5实现获取地理位置信息并定位功能文档格式.docx(8页珍藏版)》请在冰豆网上搜索。
复制代码
代码如下:
functiongetLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
alert(&
quot;
扫瞄器不支持地理定位。
&
);
}
上面的代码可以知道,假如用户设备支持地理定位,则运行getCurrentPosition()办法。
假如getCurrentPosition()运行胜利,则向参数showPosition中规定的函数返回一个coordinates对象,getCurrentPosition()办法的其次个参数showError用于处理错误,它规定当猎取用户位置失败时运行的函数。
我们先来看函数showError(),它规定猎取用户地理位置失败时的一些错误代码处理方式:
functionshowError(error){
switch(error.code){
caseerror.PERMISSION_DENIED:
定位失败,用户否决哀求地理定位&
break;
caseerror.POSITION_UNAVAILABLE:
定位失败,位置信息是不行用&
caseerror.TIMEOUT:
定位失败,哀求猎取用户位置超时&
caseerror.UNKNOWN_ERROR:
定位失败,定位系统失效&
我们再来看函数showPosition(),调用coords的latitude和longitude即可猎取到用户的纬度和经度。
functionshowPosition(position){
varlat=position.coords.latitude;
//纬度
varlag=position.coords.longitude;
//经度
39;
纬度:
+lat+&
经度:
+lag);
利用XX地图和谷歌地图接口猎取用户地址
上面我们了解了HTML5的Geolocation可以猎取用户的经纬度,那么我们要做的是需要把抽象的经纬度转成可读的故意义的真正的用户地理位置信息。
幸运的是XX地图和谷歌地图等提供了这方面的接口,我们只需要将HTML5猎取到的经纬度信息传给地图接口,则会返回用户所在的地理位置,包括省市区信息,甚至有街道、门牌号等具体的地理位置信息。
我们首先在页面定义要展示地理位置的div,分离定义idbaidu_geo和idgoogle_geo。
我们只需修改关键函数showPosition()。
先来看XX地图接口交互,我们将经纬度信息通过Ajax方式发送给XX地图接口,接口会返回相应的省市区街道信息。
XX地图接口返回的是一串JSON数据,我们可以按照需求将需要的信息展示给divbaidu_geo。
注重这里用到了jQuery库,需要先加载jQuery库文件。
varlatlon=position.coords.latitude+&
&
+position.coords.longitude;
//baidu
varurl=&
$.ajax({
type:
&
GET&
dataType:
jsonp&
url:
url,
beforeSend:
function(){
$(&
baidu_geo&
).html(&
正在定位...&
},
success:
function(json){
if(json.status==0){
).html(json.result.formatted_address);
error:
function(XMLHttpRequest,textStatus,errorThrown){
).html(latlon+&
地址位置猎取失败&
});
再来看谷歌地图接口交互。
同样我们将经纬度信息通过Ajax方式发送给谷歌地图接口,接口会返回相应的省市区街道具体信息。
谷歌地图接口返回的也是一串JSON数据,这些JSON数据比XX地图接口返回的要更具体,我们可以按照需求将需要的信息展示给divgoogle_geo。
google_geo&
if(json.status==&
OK&
){
varresults=json.results;
$.each(results,function(index,array){
if(index==0){
).html(array[&
formatted_address&
]);
以上的代码分离将XX地图接口和谷歌地图接口整合到函数showPosition()中,我们可以按照实际状况举行调用。
固然这只是一个容易的应用,我们可以按照这个容易的示例开发出无数复杂的应用,建议用手机扫瞄器拜访DEMO演示。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML5 实现 获取 地理位置 信息 定位 功能