The geolocation API is introduced in HTML5 to help users obtain the geographic location of the browser, which not only indicates the current latitude and longitude, it can also be used with the google map API to mark the current location on the map.
The HTML code is mainly two blocks. The first part of the container is used to put google Maps and mark the location, and the second part is used to display the precise longitude and latitude and the precision (error ).
1. <! Doctype html>
2. 3. 4. <! -- The following code is officially recommended by googlemap, which allows users to disable the use of the browser's zoom-in and zoom-out window function while using the googlemap's own zoom->
5. <meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no"/>
6. <title> use Google Map on the page to obtain the current location of the browser </title>
7.
8. <! -- Because google map is used on the page, import the googlemap file. -->
9. <script type = "text/javascript" src = "http://maps.google.com/maps/api/js? Sensor = false "> </script>
10.
11. <! -- This js file was written by myself. It is used to obtain the current location using the HTML5 geolocation API and identified on google map -->
12. <script type = "text/javascript" src = "js/googlemap. js"> </script>
13.
14. 15.
16. <body onload = "init ()">
17. Hello, Google Map!
18. <br>
19. <! -- This square area is used to draw a google Map -->
20. <div id = "map" style = "width: 400px; height: 400px"> </div>
21. <br>
22. <! -- This area is used to display your location information -->
23. 24. <p id = "positionInfo"> </p>
25. </body>
26.
27. The javascript method is mainly used to draw a map (and mark the location) and provide the callback function definition when the location is obtained successfully or fails:
1. // This is the initialization method used to draw a google Map
2. function init (){
3. console. log ("entering the init () method ");
4. // first, you must determine whether the browser has the geolocation attribute. Because HTML5 adds this attribute, not all browsers support this attribute.
5. if (navigator. geolocation ){
6. // If the browser supports geolocation, use the getCurrentLocation method of geolocation to obtain the current geographical location of the user,
7. // call the show_map () callback function after successful acquisition.
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. // This is a callback function used to respond when geolocation successfully obtains the geographical location of the user's browser. It encapsulates all the location information in position.
18. // so we need to parse the position to obtain the user's detailed information.
19. function show_map (position ){
20.
21. // obtain the current geographic location
22. var coords = position. coords;
23.
24. // Part 1; displays the user's precise location information
25. // component used to display precise location information on the page
26. var positionInfo = document. getElementById ("positionInfo ");
27. var positionString = "longitude:" + coords. longpolling + "<br> ";
28. positionString + = "dimension:" + coords. latitude + "<br> ";
29. var altitude = coords. altitude;
30. if (altitude! = Null ){
31. positionString + = "altitude" + coords. altitude + "<br> ";
32 .}
33. positionString + = "longitude and latitude:" + coords. accuracy + "meters" + "<br> ";
34. positionInfo. innerHTML = positionString;
35. // Part 2; display the current location of the browser on google Map
36. // set the map parameters. Set the dimensions and precision of the current location to the central point of the map.
37. var latlng = new google. maps. LatLng (coords. latitude, coords. longpolling );
38. var myOptions = {
39. // set the magnification.
40. zoom: 14,
41. // set the central point of the map to the specified coordinate point
42. center: latlng,
43. // specify the map type. The street map is selected here.
44. mapTypeId: google. maps. MapTypeId. ROADMAP
45 .};
46. // create a map and display it in "map" div. This map is called map1.
47. var map1;
48. map1 = new google. maps. Map (document. getElementById ("map"), myOptions );
49. // create a tag on the map
50. var marker = new google. maps. Marker ({
51. // mark the created annotation point. Because the annotation point is set by the current latitude and longitude, it indicates the current position.
52. position: latlng,
53. // on which map is marked, we have created map1 as google map, so it is marked on map1.
54. map: map1
55 .});
56. // set the annotation window and specify the comment Text of the window
57. var infowindow = new google. maps. InfoWindow ({
58. content: "This is the current location of Charles's browser! "
59 .});
60. // open the annotation window
61. infoWindow. open (map1, marker );
62.
63 .}
64.
65.
66.
67. // This is the second callback function. It is used to obtain the response when the geolocation fails to get the geographic location of the user's browser.
68. // The error object encapsulates all possible errors that cannot be obtained from the geographical location, and HTML5 reserves error codes for them. The value can be {1, 2, 3}
69. function handle_error (error ){
70. var errorTypes = {
71. 1: 'location service denied ',
72. 2: 'location information cannot be obtained ',
73. 3: 'Information retrieval timeout'
74 .};
75. console. log (errorTypes [error. code] + ":, your current geographic location cannot be determined ");
76 .}
To display the results, you must enable the shared location function because it is private. I tested Opera 11 and Firefox 10, and Google Chrome.
Starting from Opera 11, you need to select whether to share the geographical location:
Then sign a User Agreement:
For Firefox, you also need to get a permission to share your location:
In the end, the user's current location is displayed (your ip address actually exposes your information). For example, if I live near the guanglan Road Subway Station in Shanghai, the result is as follows:
From consortium of parallel lines
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
