h5地理位置相关api
1. HTML5怎样获取地理位置
HTML5怎样获取地理信息,如html5怎样获取ip地址,怎样实现gps导航定位,wifi基站的mac地址服务等,这些在HTML5中已经都已经有API实现了,用户可以轻松使用html5技术进行操作,下面详细为大家介绍HTML5操作地理信息。
1、HTML5中ip地址
其实在中国IP地址还是比较准确,书上说不准确,很多时候获取的是ISP机房的位置,但是获取非常方便,没有什么限制。但是实际上我觉得在中国,ip地址还是比较准确的,基本上上能精确到小区或大楼的标准。
2、HTML5中GPS定位操作
GPS定位非常准确,但是需要在户外,且需要很长时间搜索卫星。但前提就是硬件设备要支持GPS。最主要的很多设备比如笔记本电脑基本都是不带GPS的,新的智能手机purse hanger倒是都有。
3、WiFi基站的mac地址。
(猜测是连接位置已知的公共WiFi的时候,通过Mac地址识别WiFi接入点,从而定位)
这种定位的精度还是很不错的,而且还可以在室内定位。不过由于这种位置公开的wifi比较少,此种方法的适用范围比较少。
4、 GSM或CDMA基站
通过基站定位,精度随基站密度变化,精度一般,还是只有手机能用。看来地理位置API还是手机上比较有实用性。
5、用户指定位置
晕,这个就不是HTML5的范畴了。
地理位置获取流程步骤:
1、用户打开需要获取地理位置的web应用。
2、应用向浏览器请求地理位置,浏览器弹出询问窗口,询问用户是否共享地理位置。
3、假设用户允许,浏览器从设别查询相关信息。
4、浏览器将相关信息发送到一个信任的位置服务器,服务器返回具体的地理位置。
2. html5的地理定位功能getCurrentPosition还能用吗
能用,可以实现的,HTML5可以使用手机的GPS信息,利用网络等地图的开放API就可以了。
HTML5中可以通过IP,WIFI信息,GPS,来实现地理定位,当然相关精度也是有所不同,所以如果要精确导航就得使用GPS信息。
下面是一段HTML5结合网络地图API来获取位置的代码:
<div id="allmap"></div>当前定位地址:<a id="-gps"></a><span></span></div>
<script>
var map = new BMap.Map("allmap");
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
map.panTo(r.point);
//alert('您的位置:'+r.point.lng+','+r.point.lat);
var pt = r.point;
var geoc = new BMap.Geocoder();
geoc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
$("#-gps").text(addComp.district+addComp.street+addComp.streetNumber);
});
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
</script>
3. html5+怎么获取当前地理位置
定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位,如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的,所以我们在访问该应用时会提示是否允许地理定位,我们当然选择允许即可。
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
alert("浏览器不支持地理定位。");
}
}
上面的代码可以知道,如果用户设备支持地理定位,则运行 getCurrentPosition() 如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象,getCurrentPosition() 方法的第二个参数showError用于处理错误,它规定当获取用户位置失败时运行的函数。
我们先来看一下函数showError(),它规定获取用户地理位置失败时的一些错误代码处理方式:
function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
alert("定位失败,用户拒绝请求地理定位");
break;
case error.POSITION_UNAVAILABLE:
alert("定位失败,位置信息是不可用");
break;
case error.TIMEOUT:
alert("定位失败,请求获取用户位置超时");
break;
case error.UNKNOWN_ERROR:
alert("定位失败,定位系统失效");
break;
}
}
我们再来看函数showPosition(),调用coords的latitude和longitude即可获取到用户的纬度和经度。
function showPosition(position){
var lat = position.coords.latitude; //纬度
var lag = position.coords.longitude; //经度
alert('纬度:'+lat+',经度:'+lag);
}
利用网络地图和谷歌地图接口获取用户地址
上面我们了解了HTML5的Geolocation可以获取用户的经纬度,那么我们要做的是需要把抽象的经纬度转成可读的有意义的真正的用户地理位置信息。幸运的是网络地图和谷歌地图等提供了这方面的接口,我们只需要将HTML5获取到的经纬度信息传给地图接口,则会返回用户所在的地理位置,包括省市区信息,甚至有街道、门牌号等详细的地理位置信息。
我们首先在页面定义要展示地理位置的div,分别定义id#_geo和id#google_geo。我们只需修改关键函数showPosition()。先来看网络地图接口交互,我们将经纬度信息通过Ajax方式发送给网络地图接口,接口会返回相应的省市区街道信息。网络地图接口返回的是一串JSON数据,我们可以根据需求将需要的信息展示给div#_geo。注意这里用到了jQuery库,需要先加载jQuery库文件。
function showPosition(position){
var latlon = position.coords.latitude+','+position.coords.longitude;
//
var url = "<a href="http://api.map..com/geocoder/v2/?ak=&callback=renderReverse&location="+latlon+"&output=json&pois=0">http://api.map..com/geocoder/v2/?ak=&callback=renderReverse&location="+latlon+"&output=json&pois=0</a>";
$.ajax({
type: "GET",
dataType: "jsonp",
url: url,
beforeSend: function(){
$("#_geo").html('正在定位...');
},
success: function (json) {
if(json.status==0){
$("#_geo").html(json.result.formatted_address);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#_geo").html(latlon+"地址位置获取失败");
}
});
});
再来看谷歌地图接口交互。同样我们将经纬度信息通过Ajax方式发送给谷歌地图接口,接口会返回相应的省市区街道详细信息。谷歌地图接口返回的也是一串JSON数据,这些JSON数据比网络地图接口返回的要更详细,我们可以根据需求将需要的信息展示给div#google_geo。
function showPosition(position){
var latlon = position.coords.latitude+','+position.coords.longitude;
//google
var url = 'http://maps.google.cn/maps/api/geocode/json?latlng='+latlon+'&language=CN';
$.ajax({
type: "GET",
url: url,
beforeSend: function(){
$("#google_geo").html('正在定位...');
},
success: function (json) {
if(json.status=='OK'){
var results = 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+"地址位置获取失败");
}
});
}
4. html5怎么实现调用gps获取地理位置具体代码
1、网络直接搜【网络地图调用】,点击出现的第二个网站,进入这个网站即可回。
5. html5地理定位api怎么连接百度地图
可以实现的,HTML5可以使用手机的GPS信息,利用网络等地图的开放API就可以了。
HTML5中可以通过IP,WIFI信息,GPS,来实现地理定位,当然相关精度也是有所不同,所以如果要精确导航就得使用GPS信息。
下面是一段HTML5结合网络地图API来获取位置的代码:
<div id="allmap"></div>当前定位地址:<a id="-gps"></a><span></span></div>
<script>
var map = new BMap.Map("allmap");
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
map.panTo(r.point);
//alert('您的位置:'+r.point.lng+','+r.point.lat);
var pt = r.point;
var geoc = new BMap.Geocoder();
geoc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
$("#-gps").text(addComp.district+addComp.street+addComp.streetNumber);
});
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
</script>
6. html5应用 调用百度地图API 为什么在手机端
最近项目需要,稍微研究一下html5获取当前地理位置的问题。
获取当前位置的经纬度很简单,一句代码就搞定
[javascript]view plain
navigator.geolocation.getCurrentPosition(function(position){
longitude=position.coords.longitude;
latitude=position.coords.latitude;
});
- 然后查阅网络地图API,很easy,也是几句代码就搞定的事
varmap=newBMap.Map("allmap");<prename="code"class="javascript">varpoint=newBMap.Point(longitude,latitude);<prename="code"class="javascript">vargeoc=newBMap.Geocoder();
geoc.getLocation(point,function(rs){
varaddComp=rs.addressComponents;
alert(addComp.province+","+addComp.city+","+addComp.district+","+addComp.street+","+addComp.streetNumber);
});
- 好的,本以为到此结束,结果实际测试发现有点问题,显示的位置与我的真正位置偏差大约两三公里左右。
varmap=newBMap.Map("allmap");
varlongitude,latitude;
navigator.geolocation.getCurrentPosition(function(position){
longitude=position.coords.longitude;
latitude=position.coords.latitude;
});
setTimeout(function(){
vargpsPoint=newBMap.Point(longitude,latitude);
BMap.Convertor.translate(gpsPoint,0,function(point){
vargeoc=newBMap.Geocoder();
geoc.getLocation(point,function(rs){
varaddComp=rs.addressComponents;
alert(addComp.province+","+addComp.city+","+addComp.district+","+addComp.street+","+addComp.streetNumber);
});
});
},3000);
- 这段代码依赖两个包
<scripttype="text/javascript"src="http://api.map..com/api?v=2.0&ak=秘钥"></script>
<scripttype="text/javascript"src="http://developer..com/map/jsdemo/demo/convertor.js"></script>
[javascript]view plain
[javascript]view plain
一开始以为是html5获取经纬度的偏差问题,然而并不是
然后开始查资料,求助强大的度娘,然后无意中发现了一个叫做坐标转换的东西,一搜索才知道,原来网络地图对坐标进行了深度封装,必须通过他提供的接口进行坐标转换才行
(当然了,还是因为我以前没接触过网络地图,所以不知道这点知识,常用网络地图api的应该对这个很熟悉的吧)
好了,废话不多说,上最终代码吧
[javascript]view plain
[html]view plain
7. HTML5怎么用高德地图API返回当前位置的经纬度
HTML5怎么用高德地图API返回当前位置的经纬度
开发指南第三章定位信息前半内部分的代码实现的功容能是:当手机采集的地理位置(经纬度)发生改变时在界面上显示出改变后的经纬度。如果开发过android原生定位程序的开发者应该对这部分代码不陌生,中规中矩,先注册位置监听服务,然后当位置发生改变后出发onLocationChanged()方法。现在请在官网上下载示例代码,导入工程后开启包com.amap.cn.apis.location中的MyLocation.java文件,该文件实现的主要功能是:初始化地图并且实现首次定位,地图会自动移动到定位点,我们一会便要基于这个文件来完成地图自动实时定位的功能。
8. html5地理定位api有哪些
地理位置定位的几种方式:IP地址,GPS,Wifi,GSM/CDMA地理位置获取流程:1、用户打开需要获取地理位置的web应用。2、应用向浏览器请求地理位置,浏览器弹出询问,询问用户是否共享地理位置。3、假设用户允许,浏览器从设别查询相关信息。4、浏览器将相关信息发送到一个信任的位置服务器,服务器返回具体的地理位置。
HTML5地理地位的实现: 1. 实现基于浏览器(无需后端支持)获取用户的地理位置技术 2. 精确定位用户的地理位置( 精度最高达10m之内,依赖设备 ) 3. 持续追踪用户的地理位置 4. 与 Google Map、或者 Bai Map 交互呈现位置信息。
HTML5中地理位置定位的方法
Geolocation API存在于navigator对象中,只包含3个方法:1、getCurrentPosition //当前位置2、watchPosition //监视位置3、clearWatch //清除监视
getCurrentPosition(success,error,option)方法最多可以有三个参数:第一个参数是成功获取位置信息的回调函数,它是方法唯一必须的参数;第二个参数用于捕获获取位置信息出错的情况,第三个参数是配置项。
******************************************获取自己当前的位置
(!DOCTYPE html)
(html xmlns="http://www.w3.org/1999/xhtml")
(head)
(meta http-equiv="Content-Type" content="text/html; charset=utf-8"/)
(title)H5地理位置Demo(/title)
(script src="http://api.map..com/api?v=1.3" type="text/javascript")
(/script)
(/head)
(body)
(div id="aaa" style="border:#ccc solid 1px" width:"697px" height:"500px")(/div)
(script type="text/javascript")
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(function (p) {
var latitude = p.coords.latitude//纬度
var longitude = p.coords.longitude;
createmap(latitude, longitude);
}, function (e) {//错误信息
var aa = e.code + "\n" + e.message;
alert(aa);
}
);
}
function createmap(a,b)
{
var map = new BMap.Map("aaa");
var point = new BMap.Point(b, a);
map.centerAndZoom(point, 20);//设置地图的中心点和坐标
Window.map = map;//将map变量存储在全局
}
(/script)
(/body)
(/html)
9. 如何使用html5地理定位api有哪些
html5中地理位置定位来的方法源
Geolocation API存在于navigator对象中,只包含3个方法:
1、getCurrentPosition //当前位置
2、watchPosition //监视位置
3、clearWatch //清除监视
getCurrentPosition(success,error,option)方法最多可以有三个参数:
第一个参数是成功获取位置信息的回调函数,它是方法唯一必须的参数;
第二个参数用于捕获获取位置信息出错的情况,
第三个参数是配置项。
10. html5如何实现地理位置定位原理
html5实现地理位置定位原理如下: