Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use Geolocation in JavaScript

2025-02-28 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article mainly introduces "how to use Geolocation in JavaScript". In daily operation, I believe many people have doubts about how to use Geolocation in JavaScript. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to use Geolocation in JavaScript". Next, please follow the editor to study!

To display the results in a map, you need to access a mapping service, such as Google Maps.

In the following example, the latitude and longitude returned are used to display the location in the Google map (using a still image):

Example

Function showPosition (position) {

Let latlon = position.coords.latitude + "," + position.coords.longitude

Let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=

"+ latlon+" & zoom=14&size=400x300&sensor=false&key=YOUR_KEY "

Document.getElementById ("mapholder") [xss_clean] = "

"

}

Location-specific information

This page demonstrates how to display the location of a user on a map.

Geolocation is also useful for location-specific information, such as:

The latest local information

Show points of interest near the user

Navigation by Direction (Turn-by-turn navigation) (GPS)

GetCurrentPosition () method-returns data

The getCurrentPosition () method returns an object on success. Latitude, longitude, and precision attributes are always returned. If available, return other properties:

Property return

The latitude of the coords.latitude in decimal numbers (always returned).

The longitude of coords.longitude in decimal numbers (always returned).

Coords.accuracy position precision (always returned).

The height (in meters) above the coords.altitude mean sea level (returned if available).

The high precision of the coords.altitudeAccuracy position (returned if available).

The clockwise heading of the coords.heading from north (return if available).

The speed of coords.speed in meters per second (return if available).

Date / time of the timestamp response (returned if available).

Geolocation object-other interesting methods

There are other interesting methods for Geolocation objects:

WatchPosition ()-returns the user's current location and continues to return to the updated location as the user moves (such as GPS in the car).

ClearWatch ()-stops the watchPosition () method.

The following example shows the watchPosition () method. You need accurate GPS devices to test (such as smartphones):

Example

Const x = document.getElementById ("demo")

Function getLocation () {

If (navigator.geolocation) {

Navigator.geolocation.watchPosition (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

}

At this point, the study on "how to use Geolocation in JavaScript" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report