网上有很多关于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. WebSphere ILog JRules 域的介绍和定制

    WebSphere ILog JRules 域的介绍和定制 引言 随着企业业务的不断发展,越来越多的企业正经历着以下的情形: 企业需要对于业务系统的频繁变化做出及时的关注和响应,例如,竞争对手或经济环 ...

  2. 用Total Commander for Android管理应用程序

    用Total Commander for Android管理应用程序 前不久安装了一个Total Commander的Anroid版本,除了用它来管理文件之外,我发现用它管理已安装程序挺不错的. 可以 ...

  3. HashTable浅析

    本文转载自: http://rock3.info/blog/2013/12/05/hashtable%E6%B5%85%E6%9E%90/ 一.Hash特点 Hash,就是杂凑算法,Hash(str1 ...

  4. 【WPF】代码触发Button点击事件

    先定义Button按钮并绑定事件. public void test() { Button btn = new Button(); btn.Click += Btn_Click; } private ...

  5. 【进阶修炼】——改善C#程序质量(7)

    113,声明变量时考虑最大值. Ushort的最大值是65535,用于不同的用途这个变量可能发生溢出,所以设计时应充分了解每个变量的最大值. 114,MD5不再安全. MD5多用于信息完整性的校验.R ...

  6. 将html转换为Drupal模板文件的一般步骤

    本篇文章以自定义page.tpl.php文件为例,介绍在Drupal主题开发工作中,将html文件转换为tpl模板文件的一般步骤. 仅保留html文件中body标记之间的内容(不含body标记),其他 ...

  7. mysq在某一刻同时获取主从库的位置点

    在从库进行锁表操作flush table with read lock, 通过show slave status\G 获取对应主库的位置点: show slave status\G********** ...

  8. Windows 7 incorrectly reports "No Internet Access"

    PROBLEM DESCRIPTION Windows 7 may sometimes report that it has "No Internet Access"; this ...

  9. QVariant类及QVariant与自定义数据类型转换的方法

    这个类型相当于是Java里面的Object,它把绝大多数Qt提供的数据类型都封装起来,起到一个数据类型“擦除”的作用.比如我们的 table单元格可以是string,也可以是int,也可以是一个颜色值 ...

  10. Ogre 渲染目标解析与多文本合并渲染

    实现目标 因为需求,想找一个在Ogre中好用的文本显示,经过查找和一些比对.有三种方案 一利用Overlay的2D显示来达到效果. http://www.ogre3d.org/tikiwiki/tik ...