HTML5 Geographic Positioning and third-party tools Baidu map applications, html5 geographic

HTML5 Geographic Positioning and third-party tools Baidu map applications, html5 geographic

Preface:
I have seen many technical experts and related blogs that seldom describe the geographical positioning of html5. I don't know why they are reluctant to mention it or why they are rarely used, I personally summarized two reasons based on a little experience:
First, the reason for service providers is that HTML5 positioning is provided by google. Because google bans the Chinese mainland, the positioning function is not supported, which is the main reason.
2. HTML5 built-in geographic positioning, poor performance, compared with third-party tools-similar to Baidu maps, not at one level, during real project development, the native HTML5 built-in geographic positioning is rarely used, which is a secondary reason!

I. New HTML5 features-geographical positioning
Since geographic positioning is a new feature of HTML5, we also need to learn and master related APIs and learn how to use geographic positioning.
Learn more about common sense

A new termGeolocation:

It is used to obtain the geographic coordinates of the current browser and provide Location Based Service (LBS). For example, if you are hungry, you can deliver meals, Didi taxi, autonavi navigation, and other software use LBS, including the following data:
Longitude: longpolling
Latitude: latitude
Altitude: altitude
Speed: speed

Platforms can be divided into mobile terminals and PC terminals:
(1) mobile browser:
First try to use the built-in GPS data --Precision in meters
Then, use the mobile phone base station number to reverse export the corresponding geographic location-the positioning accuracy is measured in kilometers.
(2) PC browser:
Reverse query through the IP address of the computer --The precision is measured in kilometers.

Question:
So how can we get location information from HTML5?
First, press F12 in the browser to open the console and enter window. navigator. geolocation to view the positioning information!

We can see that there are three main methods on the positioning information, meaning:

GetCurrentPosition: fn (succ, err) // gets the current positioning data, including the callback function watchPosition: fn // monitor the positioning data clearWatch: fn // clear positioning monitoring

Now that we know how to use geographic location in HTML5 files, we use development tools to create an HTML file and create a button. When the button is clicked, the background displays the location information!

<! DOCTYPE html> 

When you click the button, the positioning data is obtained successfully, but the height and speed are Null due to PC reasons. Therefore, you only need to remember a method to obtain the geographic location in html5!
Navigator. geolocation. getCurrentPosotion (function (pos) {console. log ('data retrieved successfully'); // pos. coords. longtitude ....}, function (err) {console. log ('data retrieval failed'); // err. code err. message })
Ii. Use a third-party tool-Baidu Map

As I mentioned in the preface, Baidu map is used in projects and many mobile apps to provide users with positioning information. How can we use Baidu map in our projects?
First of all, we need to know that the source code of Baidu map will not be provided for download. This involves the interests of the company. You don't have to say much, but Baidu is still a very conscientious company, we can register a developer account for development and use!
Procedure:

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

We can see that Baidu map can be used for web development, Android development, and ios development. Here we use web development and click JavaScript API
URL: http://lbsyun.baidu.com/index.php? Title = jspopular
We can present many cases and functions in the API. To use Baidu map, you must first obtain the key!

I will explain what the key is later. First, click to enter the page. If the login page is displayed, log in, log in and click Register developer account (as I have recently registered, I cannot demonstrate it here, you need to do this yourself), enter the relevant mobile phone number and email address, and then verify it in the email address. After the verification is successful, click Create application. The following page is displayed:

Enter an application name at will.
Application Type Selection --- Browser
Referer whitelist: indicates who can access your application and how to access your application. Here, you can enter an asterisk '*' to indicate that all users can access the application, this is because we can only perform tests. If the project is used in the future, there will be related encryption methods and so on !! Click Submit to complete the creation !!
After the application is created, the following page is displayed:

The Application ID, application name, and the most important access application code are displayed, which are the keys mentioned above!
Then after getting the key, we go back to the home http://lbsyun.baidu.com/index.php? Title = jspopular
Click the Development Guide on the left to view the usage and cases of related APIs !!, This API is shown in the editor, so it is the best conscience in the API. There is no nonsense,
It is very detailed and easy to understand. Because there are too many, I will introduce several main usage here !!!

We create a new HTML file and copy the above Code to the HTML file.
<! DOCTYPE html> 
Use Baidu map:

OK, we successfully used Baidu map in the HTML file, now we can use Baidu map like in http://map.baidu.com !!
Function Description:

<Script src = "http://api.map.baidu.com/api? V = 2.0 & ak = access key applied for by your website on Baidu map "> </script>
Enter the long string of keys you just obtained in the ak to reference Baidu map !!
Create a map instance-required.
Var map = new BMap. Map ("container ");
Create a specified point. Your longitude and latitude information !! If you do not know, you can use the previous
Navigator. geolocation. getCurrentPosotion method to obtain latitude and longitude-required.
Var point = new BMap. Point (116.300982, 39.915907 );
The map number 17 is a hierarchy centered on a specified point. The hierarchy can be divided into 1 ~ Level 18: The lower the level, the larger the range of map views. The larger the level, the larger the range. You can test the map effects displayed at different levels !! --- Required.

Map. centerAndZoom (point, 17 );
The map can be scaled freely with the mouse-optional.
Map. enableScrollWheelZoom (true );
Map Display Control-test the effect by yourself. It is not a major function and is not described here-optional.
map.addControl(new BMap.NavigationControl());map.addControl(new BMap.OverviewMapControl());map.addControl(new BMap.ScaleControl());map.addControl(new BMap.MapTypeControl());
Display a Annotation on the map -- Optional

Var marker = map. addOverlay (new BMap. Marker (point ));
Okay, the third-party Baidu map is mentioned here. There are many interesting functions that you can use on your own, so the methods and parameters can be found in the API!
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.