网上有很多关于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. Android——Activity去除标题栏和状态栏

    一.在代码中设置 public void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  //去 ...

  2. Fine-tuning Convolutional Neural Networks for Biomedical Image Analysis: Actively and Incrementally如何使用尽可能少的标注数据来训练一个效果有潜力的分类器

    作者:AI研习社链接:https://www.zhihu.com/question/57523080/answer/236301363来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...

  3. 在android中使用logback-android日志框架配置 slf4j + logback

    为什么使用 slf4j + logback logbak定位于log4j的替代者,logback同样支持slf4j,方便被替换.在Android平台上,我在使用log4中遇到tag混乱的问题.相比lo ...

  4. 很简洁的分页控件 适合MVC

    <!DOCTYPE html> <html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml" ...

  5. C/C++中near和far的区别

    C/C++中near和far的区别 关键字near和far受目标计算机体系结构的影响.目前编程中使用不多. near关键字创建一个指向可寻址内存低端部分的目标指针.这些指针占用内存的单一字节,并且他们 ...

  6. 纯css控制文字2行显示多余部分隐藏

    在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space: nowrap; overflow: hidden; text-o ...

  7. 微信小程序的json遍历

    入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉. <view wx:for="{{items}}&q ...

  8. Sword ACE编译

    1.设置环境变量 #ACE_ROOT是指ACE解压目录 export ACE_ROOT=/home/person/2/ACE_wrappers export LD_LIBRARY_PATH=$ACE_ ...

  9. JUnit套件测试实例

    “套件测试”是指捆绑了几个单元测试用例并运行起来.在JUnit中,@RunWith 和 @Suite 这两个注解是用来运行套件测试. 下面的例子演示这两个单元测试:JunitTest1 和 Junit ...

  10. 生成基于Maven的项目文档站点

    在Maven中,可以使用“mvn site”,为您的项目信息生成文档站点. mvn site 生成的网站是在项目的“target/site”文件夹中. mvn site 示例 请参见通过“mvn si ...