How to use HTML5 to obtain geographical location

Most of the current mobile terminals have GPS positioning function. On the one hand, the base station can be used to obtain the position, and on the other hand, the GPS chip can be used for precise positioning. So during the front-end development process, how do we share the geographical location with the user's consent? What about obtaining precise positioning information? This article shows you how to use HTML5 to obtain geographical location. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Principle of obtaining geographical location

Most devices require user permissions to share their geographical location, so how do devices identify their geographical location? What about? There are roughly two ways:

1. # Positioning through the IP address of the mobile terminal (including WiFi, CDMA, etc.).

2. A GPS device that obtains latitude and longitude information through satellite positioning.

First we need to set up the calling function to apply for permission, then use the callback function to obtain the geographical location information, and finally we need to perform fault-tolerant processing on the output results.

Steps to obtain geographical location

Step 1: Call the location function

function get_location() {
  navigator.geolocation.getCurrentPosition(show_map, handle_error, PositionOptions);
}

Step 2: Get the geographical location

function show_map(position) {
  var latitude = position.coords.latitude;//获取纬度
  var longitude = position.coords.longitude;//获取经度
}

This callback function needs to pass in a position object, which is the obtained location information. The position attribute is shown in the figure

##Step 3: Fault Tolerance Processing

function handle_error(err) {
  switch(err.code)  {
    case err.PERMISSION_DENIED:
      break;
    case err.POSITION_UNAVAILABLE:
      break;
    case err.TIMEOUT:
      break;
    case err.UNKNOWN_ERROR:
      break;
  }
}

Four error conditions are listed here

1. The user rejected the request to obtain the geographical location.

2. Location information is not available.

3. The request for geographical location information timed out.

4. unknown mistake.

The above is the detailed content of How to use HTML5 to obtain geographical location. For more information, please follow other related articles on the PHP Chinese website!