Shulou(Shulou.com)06/02 Report--

This article mainly introduces how HTML5 uses geographic positioning, which has a certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let's take a look at it.

Locate the location of the user

HTML5 Geolocation API is used to obtain the user's geographic location.

In view of the fact that this feature may infringe upon the user's privacy, the user location information is not available unless the user agrees.

Browser support

Internet Explorer 9, Firefox, Chrome, Safari, and Opera support geolocation.

Note: geolocation is more accurate for devices with GPS, such as iPhone.

HTML5-

Use the getCurrentPosition () method to get the location of the user.

The following example is a simple geolocation example that returns the longitude and latitude of the user's location.

Instance var x=document.getElementById ("demo"); function getLocation () {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition (showPosition);} else {x [XSS _ clean] = "Geolocation is not supported by this browser.";}} function showPosition (position) {x [XSS _ clean] = "Latitude:" + position.coords.latitude + "Longitude:" + position.coords.longitude;}

Examples explain:

Detect whether geolocation is supported

If supported, run the getCurrentPosition () method. If not, a message is displayed to the user.

If getCurrentPosition () runs successfully, a coordinates object is returned to the function specified in the parameter showPosition

The showPosition () function gets and displays longitude and latitude

Handle errors and rejections

The second parameter of the getCurrentPosition () method is used to handle errors. It specifies the function to run when it fails to get the user's location:

Instance function showError (error) {switch (error.code) {case error.PERMISSION_DENIED: X [XSS _ clean] = "User denied the request for Geolocation." Break; case error.POSITION_UNAVAILABLE: X [XSS _ clean] = "Location information is unavailable." Break; case error.TIMEOUT: X [XSS _ clean] = "The request to get user location timed out." Break; case error.UNKNOWN_ERROR: X [XSS _ clean] = "An unknown error occurred." Break;}}

Error code:

Permission denied-users do not allow geolocation

Position unavailable-unable to get the current location

Timeout-Operation timed out

Display the results in the map

To display the results in a map, you need to access mapping services that use latitude and longitude, such as Google Maps or Baidu Maps:

Instance function showPosition (position) {var latlon=position.coords.latitude+ "," + position.coords.longitude;var img_url= "http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false";document.getElementById("mapholder")[xss_clean]="

";}

In the above example, we use the returned latitude and longitude data to display the location in Google Maps (using a still image).

Google Maps script example

Click this button to get your location:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.