你的位置： >
> HTML5 获取当前位置的经纬度
HTML5 获取当前位置的经纬度
今天上午市场部门让我写一个地图导航的功能，我特么的不想写。一再的推辞。我说你们项目要求紧握需要时间看看，肯定不成的。因为我感觉这个功能首先需要H5 定位，其次就是百度的API。这是我最头疼的东西了。虽然我之前写过百度地图但那效果超级low啊。
特么的下午两点人家说了我给你两天时间看看成不成，当时我就郁闷了。。。。。。我说恩。。。啊
好吧。那就看看呗。（PS： 主要自己心里没谱，没写过啊，但是人家给时间了尼还要怎么推脱呢？低头看吧！）但是我看了一下文档，写了一个小demo后瞬间感觉信心倍增啊。原来H5定位没有想象中的那么难啊！
今天给大家看看我自己写的demo怎么实现H5地理定位吧。（就是一个简单的案例长的不漂亮）
&p id="demo"&点击这个按钮，获得您的坐标：&/p&
&button onclick="getLocation()"&试一下&/button&
var x=document.getElementById("demo");
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
x.innerHTML="Geolocation is not supported by this browser.";
function showPosition(position){
x.innerHTML="Latitude: " + position.coords.latitude + "&br /&Longitude: " + position.coords.
例子解释：
检测是否支持地理定位
如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
showPosition() 函数获得并显示经度和纬度
上面的例子是一个非常基础的地理定位脚本，不含错误处理。
有什么不明白的请看
下班了写到这里，晚上继续和大家说说如何利用H5定位功能结合百度API 完成一个导航的需求！有需要的童鞋请继续关注。
很多小伙伴找我要demo，今天正好有时间我就稍微的整理了一下。（ps：我一直是很懒的。）需要的自己下载吧！ 移动端的需要部署到自己的服务器上看的哦！
下载地址：文件名称：HTML5 获取当前位置的经纬度文件大小：不大嘎嘎适用版本：手机更新日期：作者信息：小月博客 转载请注明： & 赏一点心意×
您也可以使用第三方帐号快捷登录
订单信息（价格单位：积分）
*商品名称：
*商品单价：
*商品数量：
收货信息商店（虚拟商品除邮箱外可不填）
收货姓名：
收货地址：
收货邮编：
用户邮箱：
电话号码：
手机号码：
留言备注：
总金额：1.00 积分后使用快捷导航没有帐号？
暂时没有人问过相似的问题，你可以做第一个提问题的人
查看: 17466|回复: 22
利用html5中的 navigator.geolocation获取位置获取不到
本帖最后由 huiccsu 于
16:08 编辑
最近的一个项目需要用到html5定位功能，我的代码如下：
&script type=&text/javascript&&
var map = new BMap.Map(&map_canvas&);
function lodeSupport(){
& & if(navigator.geolocation){
& && && &navigator.geolocation.getCurrentPosition(
& && &&&& & & & updataPosition,
& && &&&& & & & getPositionError,
& && &&&& & & &&&{
& && && & & & & && &&enableHighAcuracy&: true //是否启用高精确度模
& && &&&& & & & });
& & }else{
& && &&&alert('对不起，浏览器不支持！');
& & }
}
function updataPosition(position){
& & & &
& & var latitudeP = position.coords.
& & var&&longitudeP = position.coords.
& & & & Wap.zoomStore(latitudeP,longitudeP,${vid });
& & & & Wap.nearbyStore(latitudeP,longitudeP);&&
& & & & //在百度 map中显示地址
& & & & var point = new BMap.Point(longitudeP , latitudeP);&&// 创建点坐标&&
& & & & map.centerAndZoom(point, 16);//初始化地图，设置中心点坐标和地图级别&&
& & & & //var marker = new BMap.Marker(point);& &
& & & & //map.addOverlay(marker);
& & & & BMap.Convertor.translate(point,0,translateCallback);& &&&//真实经纬度转成百度坐标& & & &
}
//坐标转换完之后的回调函数
function translateCallback(point1){
& & var marker1 = new BMap.Marker(point1);
& & map.addOverlay(marker1);
& & var label = new BMap.Label(&我在这&,{offset:new BMap.Size(20,-10)});
& & marker1.setLabel(label); //添加百度label
& & map.setCenter(point1);
& &&&var gc = new BMap.Geocoder();//地址解析类
& & gc.getLocation(point1, function(rs){
& && &&&var addComp = rs.addressC& &
& && & & & & & & & var addr = addComp.province + && + addComp.city + && + addComp.district + && + addComp.street + && + addComp.streetNumber + &&;
& && & & & & & & &&&$(&.Map_right&).html(addr);
function getPositionError(error){&&
& & & & switch(error.code){&&
& & & & & & & & case error.TIMEOUT :&&
& & & & & & & & alert( & 连接超时，请重试 & );&&
& & & & & & & &&&
& & & & case error.PERMISSION_DENIED :&&
& & & & & & & & alert( & 您拒绝了使用位置共享服务，查询已取消 & );&&
& & & & & & & &&&
& & & & case error.POSITION_UNAVAILABLE :&&
& & & & & & & & alert( & 亲爱的火星网友，非常抱歉，我们暂时无法为您所在的星球提供位置服务 & );&&
& & & & & & & &&&
& & & & }&&
}
window.addEventListener('load', lodeSupport , true);
&/script&复制代码
测试情况：
1：苹果、小米、noke:定位一般般，但是位置飘忽不定，同一个地方，多刷新几次，定的位置基本都不相同，偏差大概在1千米左右。
2：三星特别倔，地图根本加载不进来(定位的设置已经打开)，如若用wifi的话，有时还可能打开，但是用3g流量根本打不开，我利用alert（）进行测试，代码执行不到回调（updataPosition）函数，错误函数（getPositionError）也没执行，可能是没设timeout参数的原因！
请问一下，我该如果解决针对三星根本打不开的问题，先不管距离有多少的偏差！
跟楼主一样，苹果手机浏览器上获取出来的gps经纬度竟然和我实际的位置相差1公里。但是看到腾讯微社区上同样也是用html5 geolocation获取到的位置却是精确到10米范围内，而我的却相差1000米，这怎么解释啊？
这个是浏览器本身对定位支持的不好呀。三星这种情况，可以考虑用ip定位弥补一下。
lbsapitest
& &IP定位不准的，只能定位到市级别的，我现在的需求是要能定位到哪个路的哪栋楼，即使有点点偏差也行，关键现在是地图都加载不出来!
地图初始化不要放到回调函数里啊，创建地图的时候就初始化啊~
coralreef1217
& & var point = new BMap.Point(longitudeP , latitudeP);&&// 创建点坐标
& &&&map.centerAndZoom(point, 16);//初始化地图，设置中心点坐标和地图级别
初始化时得传参数。在没回调出经纬度之前咋个初始化？这一步应该在回调时得到经纬度再进行的
& & 你说的这个通过html5的api指定是实现不了，其实这个apiIOS支持是最好的了
定位不出来经纬度，可以先将缩放级别定位到全国范围，中心点给北京的，定位完成了再给定位点的经纬度啊。
coralreef1217
定不了位，我把位置初始在北京更麻烦了啊。定不了位的手机结果全在北京了，会笑死客户的！
那也总比定位不了 连地图都显示不出来 更让客户笑话的吧？
我也是碰到这样的问题了，IOS上面用的很好，就是Andriod上面出问题，根本获取不到位置信息啊。
而且本来还好好的，现在又不行了呢
我现在弄得项目也要这功能，在wifi下能定位，移动网络也能，但是tmd联通3G就定位不了，坑爹
& &请问怎么实现4g和移动网络定位的呢
谷歌被墙了，你们怎么用android的浏览器定位呢？
你们为啥不用百度sdk的定位包来定位啊？很准的哦！我倒是很纠结javascript急速版的双击事件
利用javascript api大众版显示地理位置也很不准确，相差几公里，百度地图难道只能做到这份上了吗？？？求大神指教
& &百度SDK可以用在手机网页上吗
我以前试过用HTML5自带的浏览器定位功能，应该现在是不行的，偶尔可以，但是有偏移是很正常的，浏览器无法定位到很精确，除非你调用手机的硬件GPS
& &如何调用手机gps 用javascript调用
定定位api，在我的手机上老是停在一个地方，缓存也设置=0了。可是手机上的高德地图正常啊。我在wifi+3G下不能更新坐标。但是在gps下可以。人家高德地图什么情况都可以，为啥？
楼主，怎么样，问题有没有解决掉，我跟你一样，也是定位不准确，好奇怪百度的移动端地图怎么就定位很准确。
楼主，怎么样，问题有没有解决掉，我跟你一样，也是定位不准确，好奇怪百度的移动端地图怎么就定位很准确。 ...
我想问一下为什么我h5的api通过gps获取经纬，在有网络的时候能获取到经纬度，没有网络就获取不到经纬度呢
我想问一下为什么我h5的api通过gps获取经纬，在有网络的时候能获取到经纬度，没有网络就获取不到经纬度呢 ...
没有网络的话，我们的api是无法离线使用的。。
Powered by利用HTML5获取经纬度、海拔、速度、朝向等信息（附带源码和错误处理函数）
在之前的文章中我介绍了，并且还提供了，不过后来我查看W3C手册的时候发现HTML5提供了接口不仅仅是经纬度，还包括海拔，速度、朝向以及经纬度的准确度和海拔的准确度总共。所以在这里补充一篇文章，介绍如何调用其他接口，并且这次的示例中提供了错误处理函数，例如用户禁止了访问其相关经纬度的信息。 首先请看一张示意图，这里调用了W3C提供的所有接口，PS这是IE10在win7下的效果，其他浏览器，我无法保证。
不过从图中我们也可以清楚的看出一些问题，根据W3C的文档说明，有三个值是必须获取到的，也就是我在中展示的那个效果。但是其他4个值我这里是无法获取到的，这里只提供了一个null值，至于原因小编我本人也不是很清楚，用手机测试（环境：Android4.0 HTC G11 火狐beta版浏览器），也一样无法获取，效果如图：
其他的环境我并没有测试（例如iPhone等等），具体原因我也无法讲清楚，这里暂时留下这个问题，如果读者您有什么方法或者是发现我什么地方错了，求您一定要留言告诉我啊！可以在本站留言，也可以通过官方微信留言哦~ 下面的图片展示的是错误处理，如果用户拒绝访问会有一个提示内容，如图：
W3C官方提供了4种错误反馈，具体的可以，我就不赘述了。 下面是代码解释，先附上所有源代码。var doc = document,
latitude = doc.getElementById('latitude'),
longitude = doc.getElementById('longitude'),
accuracy = doc.getElementById('accuracy'),
altitude = doc.getElementById('altitude'),
altitudeAcuracy = doc.getElementById('altitudeAcuracy'),
heading = doc.getElementById('heading'),
speed = doc.getElementById('speed'),
support = doc.getElementById('support'),
showDiv = doc.getElementById('show');
function lodeSupport(){
if(navigator.geolocation){
support.innerHTML = '将下面的经纬度输入谷歌地图(纬度 经度)查看自己位置：';
showDiv.style.display = 'block';
navigator.geolocation.getCurrentPosition(updataPosition,showError);
support.innerHTML = '对不起，浏览器不支持！';
showDiv.style.display = 'none';
function updataPosition(position){
var latitudeP = position.coords.latitude,
longitudeP = position.coords.longitude,
accuracyP = position.coords.accuracy,
altitudeP = position.coords.altitude,
altitudeAcuracyP = position.coords.altitudeAcuracy,
headingP = position.coords.heading,
speedP = position.coords.
latitude.innerHTML = latitudeP;
longitude.innerHTML = longitudeP;
accuracy.innerHTML = accuracyP;
altitude.innerHTML = altitudeP;
altitudeAcuracy.innerHTML = altitudeAcuracyP;
heading.innerHTML = headingP;
speed.innerHTML = speedP;
function showError(error)
switch(error.code)
case error.PERMISSION_DENIED:
showDiv.innerHTML=&用户拒绝访问地理位置&
case error.POSITION_UNAVAILABLE:
showDiv.innerHTML=&地理位置信息无法获取&
case error.TIMEOUT:
showDiv.innerHTML=&获取位置时间超时&
case error.UNKNOWN_ERROR:
showDiv.innerHTML=&我擦，这是一个未知的错误&
window.addEventListener('load', lodeSupport , true);
其中在这句代码的时候调用了我们之前说过的:
navigator.geolocation.getCurrentPosition(updataPosition,showError);
可以看出我这里给这个getCurrentPositon函数传了两个参数,一个是得到位置,一个是错误处理,后面的代码就没什么好解释了,都是javascript函数,如果对javascript不熟悉的话,可以找相关的书籍阅读,例如那个getElementById作用。
关于这个demo
解压密码：
PS：注意，密码是，没有前面的http,不要从浏览器直接复制啊，亲！
其他相关文章
如果对本文有其他疑问，可以在本文下方留言。 如果有其他GIS、3S相关疑问也可以到&&版块发表提问。
本站QQ群：； 微信公众号：malagis，扫描&&直接关注。
作者：，GIS爱好者。分享本文，请您带上。}