网上有很多关于html5 geolocation 获取地理定位的方法，我试了下，只有在IE edge浏览器可以成功获取到，在chrome,firefox,手机端的safari,QQ浏览器，微信浏览器，都返回一样的错误信息：

POSITION_UNAVAILABLE

网上的方法大概是这样的：

if(navigator.geolocation){

  navigator.geolocation.getCurrentPosition(onSuccess , onError);

}else{

  alert("您的浏览器不支持使用HTML 5来获取地理位置服务");

}

//定位数据获取成功响应

function  onSuccess(position){

      alert('纬度: '          + position.coords.latitude          + '\n' +

      '经度: '         + position.coords.longitude         + '\n' +

      '海拔: '          + position.coords.altitude          + '\n' +

      '水平精度: '          + position.coords.accuracy          + '\n' +

      '垂直精度: ' + position.coords.altitudeAccura)

}

//定位数据获取失败响应

function onError(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;

  }

}

获取到的是经纬度，所以要调百度或者谷歌的地图api，来转换为城市。

我这里尝试返回错误信息的原因我猜可能是html5 默认调用的谷歌的接口，会有安全限制，所以我这里使用了腾讯的api实现。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>前端定位模块</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

    <style>

        * {

            margin: 0;

            padding: 0;

            border: 0;

        }

        body {

            position: absolute;

            width: 100%;

            height: 100%;

            text-align: center;

        }

        #pos-area {

            background-color: #009DDC;

            margin-bottom: 10px;

            width: 100%;

            overflow: scroll;

            text-align: left;

            color: white;

        }

        #demo {

            padding: 8px;

            font-size: small;

        }

        #btn-area {

            height: 100px;

        }

        button {

            margin-bottom: 10px;

            padding: 12px 8px;

            width: 42%;

            border-radius: 8px;

            background-color: #009DDC;

            color: white;

        }

    </style>

    <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

</head>

<body>

    <div id="pos-area">

        <p id="demo">点击下面的按钮，获得对应信息：<br /></p>

    </div>

    <div id="btn-area">

        <button onClick="geolocation.getLocation(showPosition, showErr, options)">获取精确定位信息</button>

        <button onClick="geolocation.getIpLocation(showPosition, showErr)">获取粗糙定位信息</button>

        <button onClick="showWatchPosition()">开始监听位置</button>

        <button onClick="showClearWatch()">停止监听位置</button>

    </div>

    <script type="text/JavaScript">

        var geolocation = new qq.maps.Geolocation("OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77", "myapp");

        document.getElementById("pos-area").style.height = (document.body.clientHeight - 110) + 'px';

        var positionNum = 0;

        var options = {timeout: 8000};

        function showPosition(position) {

            positionNum ++;

            document.getElementById("demo").innerHTML += "序号：" + positionNum;

            document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, null, 4);

            document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;

        };

        function showErr() {

            positionNum ++;

            document.getElementById("demo").innerHTML += "序号：" + positionNum;

            document.getElementById("demo").appendChild(document.createElement('p')).innerHTML = "定位失败！";

            document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;

        };

        function showWatchPosition() {

            document.getElementById("demo").innerHTML += "开始监听位置！<br /><br />";

            geolocation.watchPosition(showPosition);

            document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;

        };

        function showClearWatch() {

            geolocation.clearWatch();

            document.getElementById("demo").innerHTML += "停止监听位置！<br /><br />";

            document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;

        };

    </script>

</body>

</html>

这是腾讯api接口的示例，很好用，很适合wap端网站定位实现

手机端网页使用html5地理定位获取位置失败的解决办法的更多相关文章

  1. android 百度地图 定位获取位置失败 62错误

    一切正常步骤进行但是还是没有获得定位,得到的坐标总是49E.xxxx,错误代码总是62 总是以为代码.或jar包.或还有什么权限没给.搞了好久,十分郁闷.在控制台上又没有什么具体的错误提示 经过无数次 ...

  2. 使用fiddler的autoResponder及设置手机端代理实现远程调试，出现的问题及解决办法

    这是开通博客的第一篇随笔,好鸡冻哈哈o_O 首先是下载安装,我安装的是最新的v4.6.2.0版本,大家在百度上搜fidddler4在百度软件中心普通下载就可以了.或者直接用这个连接:http://dl ...

  3. 基于浏览器的HTML5地理定位

    基于浏览器的HTML5地理定位 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML ...

  4. HTML5地理定位，百度地图API，知识点熟悉

    推断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位  if (navigator.geolocation) {        alert('支持地理定位');   } e ...

  5. 移动端调试神器vconsole,手机端网页的调试工具Eruda

    移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用 vConsole调试 移动端调试工具vconsole安装Git地址:https://github.com/WechatFE ...

  6. HTML5地理定位(已知经纬度，计算两个坐标点之间的距离)

    事实上,地球上任意两个坐标点在地平线上的距离并不是直线,而是球面的弧线. 下面介绍如何利用正矢公式计算已知经纬度数据的两个坐标点之间的距离.半正矢公式也成为Haversine公式,它最早时航海学中的重 ...

  7. 手机端布局，rem布局动态获取根字体大小

    手机端布局,rem布局动态获取根字体大小. 以下代码: //rem布局动态获取根字体大小 function remDynamicLayout(){ var $windowWidth = $(windo ...

  8. 手机端网页返回顶部js代码

    <!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" cont ...

  9. 70.JS---利用原生js做手机端网页自适应解决方案rem布局

    利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...

随机推荐

  1. 基于jQuery点击缩略图右侧滑出大图特效

    基于jQuery点击缩略图右侧滑出大图特效是一款基于strip.pkgd插件实现的点击左侧缩略图右侧滑出大图切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  2. client version is higher than daemon version (client is v.1.29 daemon is v.1.22)

    安装好coreseek,建了索引,启动了服务,用php建了一个test.php,用于测试:<?phpinclude_once('sphinxapi.php');//向搜索引擎发起请求 $cl = ...

  3. Mockito 简单使用

    有一个月没写博客了,以后再忙也要抽时间写啊. 目的 正常情况下,如果要对 UserService 中方法的测试,那么其依赖的 UserDao 也要可以调通,但是,UserDao 可能并不是直接到 DB ...

  4. Android keytool 生成keystore与给APK签名

    http://www.tttabc.com/android/keytool-keystore-jarsigner-apk.htm

  5. Android开发-新建线程崩溃

    一直不满意车机不能实现屏保,最近发现可以通过设置亮度实现,顾萌生了自己写程序的来实现的念头,遂修改原来练手的app.毕竟过去了1年,各类程序.sdk都已经更新了不知道多少版本.经历了痛苦的升级.更新, ...

  6. AD集成库元件简写中英文对照表

    序号 英文简写 元件英文名 元件中文名 1 Res semi Semiconductor Resistor 半导体电阻 2 Cap semi Semiconductor Capacitor 半导体电容 ...

  7. 关于sentinel LDK加密war包实现应用加密的使用方法

    经过一周多时间的研究,终于对sentinel产品的使用有个基本的掌握.其中走了不少的弯路,特此记录一下,以备后面回顾. 开发前的用料准备: windows 10 x64位, tomcat7 x64bi ...

  8. 关于源码输出,浏览器不解析Html标签

    有时候根据需要我们需要看到浏览器上源码效果如: 但是我如果在html中输入 <a href = 'http://www.baidu.com'>百度</a>那么问题来了,总是显示 ...

  9. [spark 快速大数据分析读书笔记] 第一章 导论

    [序言] Spark 基于内存的基本类型 (primitive)为一些应用程序带来了 100 倍的性能提升.Spark 允许用户程序将数据加载到 集群内存中用于反复查询,非常适用于大数据和机器学习. ...

  10. Dijkstra 算法，用于对有权图进行搜索，找出图中两点的最短距离

    Dijkstra 算法,用于对有权图进行搜索,找出图中两点的最短距离,既不是DFS搜索,也不是BFS搜索. 把Dijkstra 算法应用于无权图,或者所有边的权都相等的图,Dijkstra 算法等同于 ...