手机端网页使用html5地理定位获取位置失败的解决办法

网上有很多关于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

 
 
     
     
    
    
    


    

        
点击下面的按钮，获得对应信息：

    
 
    

        获取精确定位信息
        获取粗糙定位信息
        开始监听位置
        停止监听位置
    
    

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