HTML5 里面引入了geolocation的API可以帮助用户获得浏览器所在的地理位置，它不仅可以标示出当前的经纬度，还可以与google map API结合使用来在地图上标示出当前位置。

HTML代码，主要就是2大块，第一部分的容器用于放google地图和标示位置，第二部分用于显示精确的经纬度以及精度（误差）。

   
   
   
   
    
    
    
    
    
  1. > 
    2. 
    
    
    
    
  2. <html> 
    3. 
    
    
    
    
  3. <head> 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. <meta name="viewport" content="initial-scale=1.0,user-scalable=no"/> 
    6. 
    
    
    
    
  6. <title>在页面上使用Google Map，获取浏览器的当前位置title> 
    7. 
    
    
    
    
  7.  
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">script> 
    10. 
    
    
    
    
  10.  
    11. 
    
    
    
    
  11.  
    12. 
    
    
    
    
  12. <script type="text/javascript" src="js/googlemap.js">script> 
    13. 
    
    
    
    
  13.    
    14. 
    
    
    
    
  14. head> 
    15. 
    
    
    
    
  15.  
    16. 
    
    
    
    
  16. <body onload="init()"> 
    17. 
    
    
    
    
  17. Hello,Google Map! 
    18. 
    
    
    
    
  18. <br> 
    19. 
    
    
    
    
  19.  
    20. 
    
    
    
    
  20. <div id="map"style="width: 400px; height: 400px">div> 
    21. 
    
    
    
    
  21. <br> 
    22. 
    
    
    
    
  22.  
    23. 
    
    
    
    
  23. <h3>您的浏览器显示了您当前的地理位置信息是:h3> 
    24. 
    
    
    
    
  24. <p id="positionInfo">p> 
    25. 
    
    
    
    
  25. body> 
    26. 
    
    
    
    
  26.  
    27. 
    
    
    
    
  27. html> 
    28.

javascript方法，主要就是用于绘制地图（以及标示位置），以及给出了当获取位置成功或者失败时候的回调函数定义：

   
   
   
   
    
    
    
    
    
  1. //这是初始化方法，用来绘制google地图 
    2. 
    
    
    
    
  2. function init() { 
    3. 
    
    
    
    
  3. console.log("entering the init() method"); 
    4. 
    
    
    
    
  4. //首先必须判断浏览器是否有geolocation属性，因为HTML5 才新增了这个属性，不是所有浏览器都支持 
    5. 
    
    
    
    
  5. if (navigator.geolocation) { 
    6. 
    
    
    
    
  6. //如果浏览器支持geolocation，则使用geolocation的getCurrentLocation方法来取得用户当前的地理位置， 
    7. 
    
    
    
    
  7. //并且在成功取得之后调用show_map()回调函数 
    8. 
    
    
    
    
  8. console.log(' Browser support geolocation '); 
    9. 
    
    
    
    
  9. navigator.geolocation.getCurrentPosition(show_map,handle_error ,null); 
    10. 
    
    
    
    
  10. } else { 
    11. 
    
    
    
    
  11. console.log(' Browser doesnt support geolocation '); 
    12. 
    
    
    
    
  12. } 
    13. 
    
    
    
    
  13.  
    14. 
    
    
    
    
  14. } 
    15. 
    
    
    
    
  15.  
    16. 
    
    
    
    
  16.  
    17. 
    
    
    
    
  17. //这是一个回调函数，用于当geolocation成功取得用户浏览器所在的地理位置时候的响应，它吧所有的位置信息封装在position中 
    18. 
    
    
    
    
  18. //所以我们就需要解析position来取得用户的详细信息 
    19. 
    
    
    
    
  19. function show_map(position) { 
    20. 
    
    
    
    
  20.  
    21. 
    
    
    
    
  21. // 取得当前的地理位置 
    22. 
    
    
    
    
  22. var coords = position.coords; 
    23. 
    
    
    
    
  23.   
    24. 
    
    
    
    
  24. //Part 1; 显示用户的精确位置信息 
    25. 
    
    
    
    
  25. //取得页面上用于显示精确位置信息的组件 
    26. 
    
    
    
    
  26. var positionInfo=document.getElementById("positionInfo"); 
    27. 
    
    
    
    
  27. var positionString="经度: "+coords.longitude+"
    "    ; 
    28. 
    
    
    
    
  28. positionString+="维度: "+coords.latitude+"
    "    ; 
    29. 
    
    
    
    
  29. var altitude=coords.altitude; 
    30. 
    
    
    
    
  30. if( altitude!=null){ 
    31. 
    
    
    
    
  31. positionString+="海拔高度"+coords.altitude+"
    "    ; 
    32. 
    
    
    
    
  32. } 
    33. 
    
    
    
    
  33. positionString+="经纬度精确到："+coords.accuracy+"米"+"
    "    ; 
    34. 
    
    
    
    
  34. positionInfo.innerHTML=positionString; 
    35. 
    
    
    
    
  35. //Part 2; 在google地图上显示浏览器的当前位置 
    36. 
    
    
    
    
  36. // 设定地图参数，将用户的当前位置的维度和精度都设定为地图的中心点 
    37. 
    
    
    
    
  37. var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); 
    38. 
    
    
    
    
  38. var myOptions = { 
    39. 
    
    
    
    
  39. // 设定放大倍数 
    40. 
    
    
    
    
  40. zoom : 14, 
    41. 
    
    
    
    
  41. // 将地图的中心点设定为指定的坐标点 
    42. 
    
    
    
    
  42. center : latlng, 
    43. 
    
    
    
    
  43. // 指定地图的类型，这里选择的是街道地图 
    44. 
    
    
    
    
  44. mapTypeId : google.maps.MapTypeId.ROADMAP 
    45. 
    
    
    
    
  45. }; 
    46. 
    
    
    
    
  46. // 创建地图并在"map"div中显示，吧这个地图叫做map1 
    47. 
    
    
    
    
  47. var map1; 
    48. 
    
    
    
    
  48. map1 = new google.maps.Map(document.getElementById("map"), myOptions); 
    49. 
    
    
    
    
  49. // 在地图上创建标记 
    50. 
    
    
    
    
  50. var marker = new google.maps.Marker({ 
    51. 
    
    
    
    
  51. //标注刚才创建的标注点，因为标注点是由当前的经纬度设定的，所以表示了当前位置 
    52. 
    
    
    
    
  52. position : latlng, 
    53. 
    
    
    
    
  53. //标注在哪张地图上，我们创建了map1作为google map，所以标注在map1上 
    54. 
    
    
    
    
  54. map : map1 
    55. 
    
    
    
    
  55. }); 
    56. 
    
    
    
    
  56. // 设定标注窗口，并且指定该窗口的注释文字 
    57. 
    
    
    
    
  57. var infowindow = new google.maps.InfoWindow({ 
    58. 
    
    
    
    
  58. content : "这是Charles的浏览器的当前位置!" 
    59. 
    
    
    
    
  59. }); 
    60. 
    
    
    
    
  60. // 打开标注窗口 
    61. 
    
    
    
    
  61. infoWindow.open(map1, marker); 
    62. 
    
    
    
    
  62.  
    63. 
    
    
    
    
  63. } 
    64. 
    
    
    
    
  64.  
    65. 
    
    
    
    
  65.  
    66. 
    
    
    
    
  66.  
    67. 
    
    
    
    
  67. //这是第二个回调函数，用于当geolocation获取用户浏览器所在的地理位置失败时候的响应 
    68. 
    
    
    
    
  68. //error对象封装了所有的可能出现的无法获得地理位置的错误信息，并且HTML5为其预留了错误码，可以取值{1,2,3} 
    69. 
    
    
    
    
  69. function handle_error(error){ 
    70. 
    
    
    
    
  70. var errorTypes={ 
    71. 
    
    
    
    
  71. 1:'位置服务被拒绝', 
    72. 
    
    
    
    
  72. 2:'获取不到位置信息', 
    73. 
    
    
    
    
  73. 3:'获取信息超时' 
    74. 
    
    
    
    
  74. }; 
    75. 
    
    
    
    
  75. console.log(errorTypes[error.code] + ":,不能确定你的当前地理位置"); 
    76. 
    
    
    
    
  76. } 
    77.

 

要显示结果，必须让用户开启共享位置功能，因为这是隐私，我测试了下Opera 11和Firefox 10 ，Google Chrome都可以。

Opera 11开始就需要用户选择是否要共享地理位置：

HTML5 geolocation API 获得用户当前地理位置_第1张图片

然后要签一份用户协议：

 

HTML5 geolocation API 获得用户当前地理位置_第2张图片

 

对于Firefox浏览器，也是需要得到用户共享自己位置的许可：

HTML5 geolocation API 获得用户当前地理位置_第3张图片

 

 

最终，就可以显示用户当前位置了（实际是你的ip暴露了你的信息），比如我住在上海广兰路地铁站附近，所以显示结果如下：

 

HTML5 geolocation API 获得用户当前地理位置_第4张图片