JavaScript geographic information API

For a web development programmer, one of the most interesting aspects of development work is to obtain geographic location information. Just imagine, where are the users browsing your web pages? The programmer can adjust the language of the website and the specific product introduction according to the geographic location information of the user. Next, we will demonstrate how to get detailed geographic information through JavaScript geographic information API in browser!

Watch the demoCheck that your browser supports the geographic information API

At present, the mainstream browsers have good support for JavaScript geographic information API. But if you’re not sure, the best way to confirm the support of the geographic information API is to test the browser’s features.

if("geolocation" in navigator) {
	//w00t!
}
else {
	alert("很不幸!你的浏览器并不支持Geolocation API功能");
}

To judge whether the browser supports the geographic API, the most important thing is to look at it navigator.geolocation This object uses in instead of if( navigator.geolocation ), which is very important, because the latter may initialize the geographic information object, thus occupying / locking the device resources.

Query geographic location information

This one navigator.geolocation.getcurrentposition Method is the most critical interface to obtain detailed location information

if("geolocation" in navigator) {
	navigator.geolocation.getCurrentPosition(function(position) {
		console.log(position);
	});
}

Once you call this method (if the request is successful, it will execute the callback method you provided in the parameter), the browser will ask the user whether to allow the program to obtain their geographic location information:

地理信息 javascript-geolocation-api

When users run a web page to get their location information, the browser can start to read the geographic information. It will return you a location information object. The structure of the object is basically as follows:

// "Position" object
{
	coords: { "Coordinates" object
		accuracy: 65,
		altitude: 294.4074401855469,
		altitudeAccuracy: 10,
		heading: -1,
		latitude: 43.01256284360166,
		longitude: -89.44531987692744,
		speed: -1
	},

	timestamp: 1429722992094269
}

If you think that the geographic location information (geographic longitude and latitude coordinates) is not enough, and you want to know which country or city these geographic coordinates belong to, you need to call other third-party databases – we will not elaborate here.

Watch the demo

This geographic information API is the most common API in many mobile applications. As a web programmer, it should be a knowledge skill that you must have. Fortunately, all popular browsers support this technology. Happy programming!

Related Article
WordPress 3D rotating tag cloud

This 3D tag cloud is not the flash version of WP cumulus n years ago. This 3D rotating tag cloud Read more

Using wampserver tool to build local PHP + MySQL environment

No matter whether we use domestic space or foreign hosts, we prefer to go online after local debugging before setting Read more

How to install Linux system on Android phone

In our daily use of Android mobile phones, the installation of a complete Linux system will make mobile phones become Read more

How to backup your website data with Android phone

No matter what you do, backup is very necessary and important. Backup is just in case. Most of the time, Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image