Using geolocation

The following example is a geolocation instance, which can return the longitude and latitude of the user’s location:

const success = res => {
	const { latitude, longitude } = res.coords
if (navigator.geolocation) {

We dissect this code step by step

Step one:Determine whether the browser has a geolocation object:

if (navigator.geolocation) {}

Step 2:Call getcurrentposition() method of geolocation:


The getcurrentposition() method has two parameters:

  • Success: the callback function that successfully gets the geographic location
  • Err: the callback function that failed to get the geographic location

Step 3:Create a success callback function:

const success = res => {
	const { latitude, longitude } = res.coords

The above code outputs the longitude and latitude of the client to the console

Data returned by getcurrentposition() method

If getcurrentposition() is executed successfully, the method will pass in an attribute containing longitude, latitude and accuracy in the parameters of the success function. If available, other properties of the following table are returned:

attribute describe
coords.latitude Latitude of decimal number
coords.longitude Longitude of decimal number
coords.accuracy Position accuracy
coords.altitude Altitude, in meters above sea level
coords.altitudeAccuracy Altitude accuracy of position
coords.heading Direction, in degrees from due north
coords.speed Speed in meters per second
timestamp Date / time of response

If the execution fails, an error message string will be passed in the parameter of the failed callback function. Any of the following error codes may appear:

error code describe
Permission denied Geolocation not allowed by user
Position unavailable Unable to get current location
Timeout The operation timed out
Unknown unknown error

Continuous monitoring of users’ geographic location

Watchposition () – returns the user’s current location and continues to return to the updated location when the user moves (like GPS in a car).

Clearwatch() – stops the watchposition() method

The following example shows the watchposition () method. You need an accurate GPS device to test this example (such as iPhone)

var view=document.getElementById("view");
function getLocation(){
    if (navigator.geolocation){
        view.innerHTML= "This browser does not support getting geographic location. ";
function showPosition(position){
    view.innerHTML= Latitude:+ position.coords.latitude  +, longitude:+ position.coords.longitude ; 

Using the interface of Baidu map open platform to return static map

You can use the interface provided by the third-party platform to obtain the static map of the current location. The following is an example of using the interface provided by Baidu map open platform to obtain the static map of the client’s geographical location:

const map = document.getElementById('map')
    const success = res => {
        //Interface address provided by Baidu map open platform
        const url = ''
        //Apply for the key, it is recommended that you register to apply for one
        const ak = 'wVGFYXm9ij7UCqEbW7CT1BFrOQYh6oXM'
        //Deconstructing the latitude and longitude of current geography
        const { latitude, longitude } = res.coords
        //Geographic location parameters of the interface
        const center = `${longitude},${latitude}`
        //Splicing interface address and required parameters, the interface will return the static map according to the longitude and latitude provided by center
        const interFace = `${url}?ak=${ak}&center=${center}`
        //Set the SRC path to the element with ID map
        map.setAttribute('src', interFace)
    if (navigator.geolocation) {

The available third-party map open platforms areTencent map open platformBaidu map open platformGaode map open platformGoogle map open platformetc.

Recommended Today

A detailed explanation of the differences between Perl and strawberry Perl and ActivePerl

Perl is the abbreviation of practical extraction and report language “practical report extraction language”. Application of activestateperl and strawberry PERL on Windows platformcompiler。 Perl   The relationship between the latter two is that C language and Linux system have their own GCC. The biggest difference between activestate Perl and strawberry Perl is that strawberry Perl […]