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