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

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

1.

2.

3.

4.

5.

6.

在页面上使用google map，获取浏览器的当前位置

7.

8.

9.

13.

14.

15.

16.

17. hello,google map!

18.

19.

20.

21.

22.

23.

您的浏览器显示了您当前的地理位置信息是:

24.

25.

26.

27.

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

1. //这是初始化方法，用来绘制google地图

2. function init() {

3. console.log("entering the init() method");

4. //首先必须判断浏览器是否有geolocation属性，因为html5 才新增了这个属性，不是所有浏览器都支持

5. if (navigator.geolocation) {

6. //如果浏览器支持geolocation，则使用geolocation的getcurrentlocation方法来取得用户当前的地理位置，

7. //并且在成功取得之后调用show_map()回调函数

8. console.log(' browser support geolocation ');

9. navigator.geolocation.getcurrentposition(show_map,handle_error ,null);

10. } else {

11. console.log(' browser doesnt support geolocation ');

12. }

13.

14. }

15.

16.

17. //这是一个回调函数，用于当geolocation成功取得用户浏览器所在的地理位置时候的响应，它吧所有的位置信息封装在position中

18. //所以我们就需要解析position来取得用户的详细信息

19. function show_map(position) {

20.

21. // 取得当前的地理位置

22. var coords = position.coords;

23.

24. //part 1; 显示用户的精确位置信息

25. //取得页面上用于显示精确位置信息的

26. var positioninfo=document.getelementbyid("positioninfo");

27. var positionstring="经度: "+coords.longitude+"
";

28. positionstring+="维度: "+coords.latitude+"
";

29. var altitude=coords.altitude;

30. if( altitude!=null){

31. positionstring+="海拔高度"+coords.altitude+"
";

32. }

33. positionstring+="经纬度精确到："+coords.accuracy+"米"+"
";

34. positioninfo.innerhtml=positionstring;

35. //part 2; 在google地图上显示浏览器的当前位置

36. // 设定地图参数，将用户的当前位置的维度和精度都设定为地图的中心点

37. var latlng = new google.maps.latlng(coords.latitude, coords.longitude);

38. var myoptions = {

39. // 设定放大倍数

40. zoom : 14,

41. // 将地图的中心点设定为指定的坐标点

42. center : latlng,

43. // 指定地图的类型，这里选择的是街道地图

44. maptypeid : google.maps.maptypeid.roadmap

45. };

46. // 创建地图并在"map"p中显示，吧这个地图叫做map1

47. var map1;

48. map1 = new google.maps.map(document.getelementbyid("map"), myoptions);

49. // 在地图上创建标记

50. var marker = new google.maps.marker({

51. //标注刚才创建的标注点，因为标注点是由当前的经纬度设定的，所以表示了当前位置

52. position : latlng,

53. //标注在哪张地图上，我们创建了map1作为google map，所以标注在map1上

54. map : map1

55. });

56. // 设定标注窗口，并且指定该窗口的注释文字

57. var infowindow = new google.maps.infowindow({

58. content : "这是charles的浏览器的当前位置!"

59. });

60. // 打开标注窗口

61. infowindow.open(map1, marker);

62.

63. }

64.

65.

66.

67. //这是第二个回调函数，用于当geolocation获取用户浏览器所在的地理位置失败时候的响应

68. //error对象封装了所有的可能出现的无法获得地理位置的错误信息，并且html5为其预留了错误码，可以取值{1,2,3}

69. function handle_error(error){

70. var errortypes={

71. 1:'位置服务被拒绝',

72. 2:'获取不到位置信息',

73. 3:'获取信息超时'

74. };

75. console.log(errortypes[error.code] + ":,不能确定你的当前地理位置");

76. }

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

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

然后要签一份用户协议：

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

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

摘自 平行线的凝聚