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

This article is about how to use geolocation in HTML5 in combination with Baidu Maps, a third-party tool. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. A new feature of HTML5-- Geographic location

Since geolocation is a new feature of HTML5, we also need to learn and master relevant API and learn how to use geolocation.

Let's learn some common sense first.

A new noun Geolocation:

Used to obtain the geographic coordinates of the current browser to provide LBS (Location Based Service), such as ele.me food delivery, Didi Taxi, Gaode navigation and other software all use LBS, including the following data:

Longitude: longitude

Latitude: latitude

Altitude: altitude

Speed: speed

The platform is divided into mobile and PC:

(1) Mobile browser:

First try using built-in GPS data-precision in meters

Then use the mobile phone base station number to deduce the corresponding geographical location in reverse-- the positioning accuracy is in kilometers.

(2) PC browser:

Reverse query through the IP address of the computer-the accuracy is in kilometers

Main topic:

So how exactly do we get location information from HTML5?

First of all, we press F12 in the browser to open console, enter window.navigator.geolocation to see the location information!

We can see that there are three main methods for location information, which mean:

GetCurrentPosition:fn (succ,err) / / gets the current positioning data, including the callback function watchPosition: fn / / Monitoring Positioning data that was successfully obtained and failed to obtain. ClearWatch: fn / / clears Positioning Monitoring

Now that we know how to use geolocation in HTML5 files, we use the development tool to create a HTML file and create a button that displays location information in the background when the button is clicked!

Get my location data btn.onclick=function () {/ / trigger navigator.geolocation.getCurrentPosition (succCB,errCB) when you click the button; function succCB (pos) {/ / successfully get the callback function! Console.log ('successfully obtained positioning data'); console.log ('latitude:' + pos.coords.longitude); console.log ('longitude:' + pos.coords.latitude); console.log ('height:' + pos.coords.altitude); console.log ('speed:' + pos.coords.speed) } function errCB (err) {/ / get the failed callback function! Console.log ('failed to get location data'); console.log (err.message); / / output information or reason for failure! }}

As shown in the figure, when the button is clicked, the location data is successfully obtained, but the height and speed are Null due to PC reasons, so we only need to remember one method to get the geographic location in HTML5!

Navigator.geolocation.getCurrentPosotion (function (pos) {console.log ('location data acquisition succeeded'); / / pos.coords.longtitude....}, function (err) {console.log ('location data acquisition failed'); / / err.code err.message})

Second, use a third-party tool-Baidu Maps

As I mentioned in the preface, Baidu Maps is used to provide users with location information in the project and many mobile applications, so how do we use Baidu Maps in our own projects?

First of all, we have to know that the source code of Baidu Map will not be available for download, which involves the interests of the company, people who understand do not need to say more, but Baidu is still a very conscientious company that allows us to sign up for developer accounts for development and use!

Steps to use:

First open the official website http://lbsyun.baidu.com/, and then pull it to the bottom:

As you can see, Baidu Maps can be used for web development, Android development, ios development. Here we use web development, click JavaScript API

Web site: http://lbsyun.baidu.com/index.php?title=jspopular

We can go to many cases and functional demonstrations in API, to use Baidu Maps, we must first get the key!

I will explain what the key is later. Click to enter the page first. If the login screen pops up, log in and click to register the developer account (because I am nearly registered, so I cannot show you here, you need to do it yourself). Enter the relevant mobile phone, mailbox, and then verify it in the mailbox. After the verification is successful, click to create an application, and the following interface will appear:

Fill in a random application name

Application type selection-browser side

Referer whitelist: refers to who can access your application and how to access your application. Fill in an asterisk'* 'here, which means that everyone can access it, because it can be done only for testing. If the project is used in the future, there will be relevant encryption methods and so on! Then click submit to complete the creation!

After the application is created, the following interface appears:

This will show the application number you just created, the application name, and the most important access application code, which is the key mentioned earlier!

Then after getting the key, we go back to the home page http://lbsyun.baidu.com/index.php?title=jspopular

Click on the development guide on the left, you can see the relevant API usage and cases! This API is seen by the editor, so the most conscientious in the API, there is no nonsense.

The writing is very detailed and easy to understand, because there are so many, here are some main uses!

Let's create a new HTML file and copy the above code into the HTML file

/ / reference method of v2.0 version: src= "http://api.map.baidu.com/api?v=2.0&ak= your key" / / reference method of v1.4 and previous versions: src= "http://api.map.baidu.com/api?v=1.4&key= your key & callback=initialize" # container {width: 800px; height: 500px } use Baidu Map / / to create a map instance to avoid repeating the name with Map, so use BMap.Map var map = new BMap.Map ("container"); / / create point coordinates var point = new BMap.Point (113.946317, 22.549008); / / initialize the map, set the center point coordinates and map level 1x18 map.centerAndZoom (point, 18) / / Mouse scrolling, map zoom map.enableScrollWheelZoom (true); / / add map controls map.addControl (new BMap.NavigationControl ()); map.addControl (new BMap.OverviewMapControl ()); map.addControl (new BMap.ScaleControl ()); map.addControl (new BMap.MapTypeControl ()); / / add map label var marker=map.addOverlay (new BMap.Marker (point))

Use Baidu Maps:

OK, we have successfully used Baidu Maps in the HTML file, and now we can use Baidu Maps as in http://map.baidu.com!

Description of related functions:

Enter the long list of keys you just got in ak and you can quote Baidu Map!

Create a map instance-required.

Var map = new BMap.Map ("container")

Create a specified point, your latitude and longitude information! If you don't know, you can use the previous

Navigator.geolocation.getCurrentPosotion method to get latitude and longitude-required.

Var point = new BMap.Point (116.300982, 39.915907)

Display the map with the specified point as the center, the number 17 refers to the level, the level can be divided into 1-18 levels, the smaller the level, the larger the scope of the map, the larger the level, the larger the range, you can test the map effect of different levels! -required.

Map.centerAndZoom (point, 17)

The map can be zoomed freely with the mouse-optional.

Map.enableScrollWheelZoom (true)

Map display control-the effect is tested by itself, here is not the main function is no longer explained-optional.

Map.addControl (new BMap.NavigationControl ()); map.addControl (new BMap.OverviewMapControl ()); map.addControl (new BMap.ScaleControl ()); map.addControl (new BMap.MapTypeControl ())

Display a callout (callout) on the map-optional

Var marker=map.addOverlay (new BMap.Marker (point))

OK, the third party Baidu Map said here, there are many fun functions can be used by themselves, so the methods and parameters can be found in API!

Thank you for reading! This is the end of the article on "how to combine Geographic location in HTML5 with Baidu Maps, a third-party tool". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

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.