Home > Developer > Web Develop

HTML5 geolocation API obtains the user's current geographic location

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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 locations, and the second part is used to display precise latitude and longitude and accuracy errors ).

 
 
    
  
  
  1. <! Doctype html>
    2. 
  
  
  2. <Html>
    3. 
  
  
  3. <Head>
    4. 
  
  
  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. 
  
  
  5. <Meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no"/>
    6. 
  
  
  6. <Title> use Google Map on the page to obtain the current location of the browser </title>
    7. 
  
  
  7.  
    8. 
  
  
  8. <! -- Because google map is used on the page, import the googlemap file. -->
    9. 
  
  
  9. <Script type = "text/javascript" src = "http://maps.google.com/maps/api/js? Sensor = false "> </script>
    10. 
  
  
  10.  
    11. 
  
  
  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. 
  
  
  12. <Script type = "text/javascript" src = "js/googlemap. js"> </script>
    13. 
  
  
  13. 
  
  
  14. </Head>
    15. 
  
  
  15.  
    16. 
  
  
  16. <Body onload = "init ()">
    17. 
  
  
  17. Hello, Google Map!
    18. 
  
  
  18. <Br>
    19. 
  
  
  19. <! -- This square area is used to draw a google Map -->
    20. 
  
  
  20. <Div id = "map" style = "width: 400px; height: 400px"> </div>
    21. 
  
  
  21. <Br>
    22. 
  
  
  22. <! -- This area is used to display your location information -->
    23. 
  
  
  23. <H3> your browser displays your current location information:  
    24. 
  
  24. <P id = "positionInfo"> </p>
    25. 
  
  
  25. </Body>
    26. 
  
  
  26.  
    27. 
  
  
  27. </Html>
    28.

The javascript method is mainly used to draw a map and mark the location), and provides 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. 
  
  
  2. Function init (){
    3. 
  
  
  3. Console. log ("entering the init () method ");
    4. 
  
  
  4. // First, you must determine whether the browser has the geolocation attribute. Because HTML5 adds this attribute, not all browsers support this attribute.
    5. 
  
  
  5. If (navigator. geolocation ){
    6. 
  
  
  6. // If the browser supports geolocation, use the getCurrentLocation method of geolocation to obtain the current geographical location of the user,
    7. 
  
  
  7. // Call the show_map () callback function after successful acquisition
    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. // 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. 
  
  
  18. // Therefore, we need to parse the position to obtain the user's detailed information.
    19. 
  
  
  19. Function show_map (position ){
    20. 
  
  
  20.  
    21. 
  
  
  21. // Obtain the current geographic location
    22. 
  
  
  22. Var coords = position. coords;
    23. 
  
  
  23. 
  
  
  24. // Part 1; displays the user's precise location information
    25. 
  
  
  25. // Component used to display precise location information on the page
    26. 
  
  
  26. Var positionInfo = document. getElementById ("positionInfo ");
    27. 
  
  
  27. Var positionString = "longitude:" + coords. longpolling + "<br> ";
    28. 
  
  
  28. PositionString + = "dimension:" + coords. latitude + "<br> ";
    29. 
  
  
  29. Var altitude = coords. altitude;
    30. 
  
  
  30. If (altitude! = Null ){
    31. 
  
  
  31. PositionString + = "altitude" + coords. altitude + "<br> ";
    32. 
  
  
  32. }
    33. 
  
  
  33. PositionString + = "longitude and latitude:" + coords. accuracy + "meters" + "<br> ";
    34. 
  
  
  34. PositionInfo. innerHTML = positionString;
    35. 
  
  
  35. // Part 2; display the current location of the browser on google Map
    36. 
  
  
  36. // Set the map parameters to set the dimensions and precision of the current location to the central point of the map.
    37. 
  
  
  37. Var latlng = new google. maps. LatLng (coords. latitude, coords. longpolling );
    38. 
  
  
  38. Var myOptions = {
    39. 
  
  
  39. // Set the magnification.
    40. 
  
  
  40. Zoom: 14,
    41. 
  
  
  41. // Set the center point of the map to the specified coordinate point
    42. 
  
  
  42. Center: latlng,
    43. 
  
  
  43. // Specify the map type. The street map is selected here.
    44. 
  
  
  44. MapTypeId: google. maps. MapTypeId. ROADMAP
    45. 
  
  
  45. };
    46. 
  
  
  46. // Create a map and display it in "map" div. This map is called map1.
    47. 
  
  
  47. Var map1;
    48. 
  
  
  48. Map1 = new google. maps. Map (document. getElementById ("map"), myOptions );
    49. 
  
  
  49. // Create a tag on the map
    50. 
  
  
  50. Var marker = new google. maps. Marker ({
    51. 
  
  
  51. // Mark the created annotation point. Because the annotation point is set by the current longitude and latitude, it indicates the current position.
    52. 
  
  
  52. Position: latlng,
    53. 
  
  
  53. // On which map is marked, map1 is created as google map, so it is marked on map1.
    54. 
  
  
  54. Map: map1
    55. 
  
  
  55. });
    56. 
  
  
  56. // Set the annotation window and specify the comments of the window
    57. 
  
  
  57. Var infowindow = new google. maps. InfoWindow ({
    58. 
  
  
  58. Content: "This is the current location of Charles's browser! "
    59. 
  
  
  59. });
    60. 
  
  
  60. // Open the annotation window
    61. 
  
  
  61. InfoWindow. open (map1, marker );
    62. 
  
  
  62.  
    63. 
  
  
  63. }
    64. 
  
  
  64.  
    65. 
  
  
  65.  
    66. 
  
  
  66.  
    67. 
  
  
  67. // This is the second callback function. It is used to obtain the response when the geolocation fails to get the geographical location of the user's browser.
    68. 
  
  
  68. // The error object encapsulates all possible errors that cannot be obtained from a geographical location, and HTML5 reserves an error code for it. The value can be {1, 2, 3}
    69. 
  
  
  69. Function handle_error (error ){
    70. 
  
  
  70. Var errorTypes = {
    71. 
  
  
  71. 1: 'location service denied ',
    72. 
  
  
  72. 2: 'location information not obtained ',
    73. 
  
  
  73. 3: 'Information retrieval timeout'
    74. 
  
  
  74. };
    75. 
  
  
  75. Console. log (errorTypes [error. code] + ":, your current geographic location cannot be determined ");
    76. 
  
  
  76. }
    77.

 

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:

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1324121A8-0.png "/>

Then sign a User Agreement:

 

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1324122F1-1.png "/>

 

For Firefox, you also need to get a permission to share your location:

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/132412E93-2.png "/>

 

 

In the end, the user's current location is actually exposed by your ip). For example, if I live near the guanglan Road Subway Station in Shanghai, the result is as follows:

 

650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/132412KK-3.png "/>

 

This article from "parallel line cohesion" blog, please be sure to keep this source http://supercharles888.blog.51cto.com/609344/856656

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
google maps api directions from current location get current location google maps api android chrome geolocation api geolocation api example php php geolocation api google html geolocation api google api for geolocation

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More