当前位置:首页 » 地理信息 » 基于百度地图的html5地理位置定位实例

基于百度地图的html5地理位置定位实例

发布时间: 2021-02-15 08:30:08

Ⅰ html5怎么实现调用gps获取地理位置具体代码

1、网络直接搜【网络地图调用】,点击出现的第二个网站,进入这个网站即可回。

Ⅱ html5如何实现地理位置定位原理

html5实现地理位置定位原理如下:

Ⅲ html5用百度地图怎么实施定位,就是手机移动坐标点也会动

这你要调用网络地图的接口啊,不是你定位的,是通过网络地图的接口来定位的

Ⅳ 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>

Ⅳ 怎样使用HTML5地理位置定位功能

HTML5本身提供了地理位置定位功能,能确定用户位置,借助网络、谷歌回地图接口来获取答用户准确的地理位置信息,开发基于地理位置信息的应用。
在支持HTML5的现代浏览器上运行,特别是手持设备,地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位,如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的,所以我们在访问该应用时会提示是否允许地理定位,我们当然选择允许即可。

Ⅵ 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>

Ⅶ html5实现地图上定位导航路线

HTML5+JQM即可实现

参考方法:
1.先去通过网络拾取坐标系统获得点位的坐标
http://api.map..com/lbsapi/getpoint/index.html

2.在网页的<head>中插入网络API引用脚本。
<script type="text/javascript" src="http://api.map..com/api?

key=&v=1.1&services=true"></script>

3.在网页的</body>之后</html>之前插入地图显示代码

4.设置显示地图的div的id为“dituContent”,即添加 id="dituContent"
由于jqm的div的高度都是根据内容自由放大的,所以为了地图能正常显示,还需要

增加一个高度值,一般情况600px就可以

注意事项:

1. var point = new BMap.Point(120.524011,36.395728); 这是定义中心店坐标

2. map.centerAndZoom(point,15); 这个据我调试 应该是控制地图比例缩放的

3. window.setTimeout(function(){map.panTo(point);}, 1000);注意了 一般的

demo是没有这个东西滴,所以呢当跳转到地图的页面时候 是不会显示你定位的中心

点的 但是由于我的聪明和机智 各种装孙子求助大神 才得知了这个大神不削一顾

的属性 :设定地图加载后1秒调至中心点 。。最后强调下

低调 一定要低调。。。

4. function createIcon(json){
var icon = new BMap.Icon("images/map_icon.png", new BMap.Size

(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-

json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size

(json.x,json.h)})
return icon;
} 这里就是创建一个icon

5. var markerArr = [{title:"西程村",content:"青岛市即墨市蓝鳌路 电话:

123123123213",point:"120.524011|36.395728",isOpen:0,icon:

{w:32,h:32,l:0,t:0,x:6,lb:5}}]; 这里呢 就是设置定位的信息

Ⅷ 如何使用HTML5地理位置定位功能

地理位置获取流程:

1、用户打开需要获取地理位置的应用。

2、应用向浏览器请求地理位置,浏览器弹出询问窗口,询问用户是否共享地理位置。

3、假设用户允许,浏览器从设别查询相关信息。

4、浏览器将相关信息发送到一个信任的位置服务器,服务器返回具体的地理位置。

检测浏览器支持:

JavaScript Code复制内容到剪贴板

function loadDemo() {
if(navigator.geolocation) {
document.getElementById(“support”).innerHTML = “HTML5 Geolocation supported.”;

} else {
document.getElementById(“support”).innerHTML = “HTML5 Geolocation is not supported in
your browser.”;
}
}

位置请求方式:

单次请求

JavaScript Code复制内容到剪贴板

navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, options);

回调函数updateLocation接受一个对象参数,表示当前的地理位置,它有如下属性:

latitude——纬度
longitude——精度
accuracy——精确度,单位米
altitude——高度,单位米
altitudeAccuracy——高度的精确地,单位米
heading—运动的方向,相对于正北方向的角度
speed——运动的速度(假设你在地平线上运动),单位米/秒

回调函数handleLocationError接受错误对象,error.code是如下错误号。

UNKNOWN_ERROR (error code 0) —— 错误不在如下三种之内,你可以使用error.message获取错误详细信息。
PERMISSION_DENIED (error code 1)—— 用不选择不共享地理位置
POSITION_UNAVAILABLE (error code 2) ——无法获取当前位置
TIMEOUT (error code 3) ——在指定时间无法获取位置会触发此错误。

第三个参数options是可选参数,属性如下:

enableHighAccuracy——指示浏览器获取高精度的位置,默认为false。当开启后,可能没有任何影响,也可能使浏览器花费更长的时间获取更精确的位置数据。
timeout——指定获取地理位置的超时时间,默认不限时。单位为毫秒。
maximumAge——最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。默认为0,表示浏览器需要立刻重新计算位置。

Ⅸ 怎么HTML网页中获取百度地区显示用户当前地理位置,并且显示出位置坐标点。

在支持html5地理定位API的浏览器上,.navigator对象新增了一个geolocation属性,以及相关的Geolocation API。都是用JS进行访问的。
下面是一个例子:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地理位置</title>
</head>
<body>
<script>
navigator.geolocation.getCurrentPosition(
function(position){
var cords = position.coords;
alert("当前经度:"+cords.longtitude +", 纬度:"+cords.latitude);
},
function(error){
var errorTypes={1:"位置服务被拒绝", 2:"获取不到位置信息", 3:"获取位置信息超时"};
alert( errorTypes[error.code] +":,不能确定当前地理位置");
}
);
</script>
</body>
</html>

这只是一个例子,一般用经度和纬度调用地图如网络地图的API显示。

注意:在电脑本机上没法测试,一般把网页放到服务器上,用手机访问可以定位。

Ⅹ 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>

热点内容
鹿特丹港国家地理 发布:2021-03-15 14:26:00 浏览:571
地理八年级主要的气候类型 发布:2021-03-15 14:24:09 浏览:219
戴旭龙中国地质大学武汉 发布:2021-03-15 14:19:37 浏览:408
地理因素对中国文化的影响 发布:2021-03-15 14:18:30 浏览:724
高中地理全解世界地理 发布:2021-03-15 14:16:36 浏览:425
工地质检具体干些什么 发布:2021-03-15 14:15:00 浏览:4
东南大学工程地质考试卷 发布:2021-03-15 14:13:41 浏览:840
中国地质大学自动取票机 发布:2021-03-15 14:13:15 浏览:779
曾文武汉地质大学 发布:2021-03-15 14:11:33 浏览:563
中国冶金地质总局地球物理勘察院官网 发布:2021-03-15 14:10:10 浏览:864