I saw a lot of technical Daniel and related blogs, and rarely described the geographical positioning of HTML5. I do n’t know if they are unwilling to mention or use less. I personally summarize two reasons according to a little experience:
First, the reason for service providers, because the positioning of HTML5 is provided by Google, because Google has blocked the mainland, the positioning function is not supported. This is the main reason
Second, the geographical positioning comes with HTML5 has poor performance. Compared with third-party tools-similar Baidu maps, etc., not at a level. When real project development This is the second reason!
1. The new feature of HTML5-geographical positioningSince geographical positioning is a new feature of HTML5, we also need to learn and master related APIs and learn how to use geographic positioning
First understand common sense
A new noun Geology:
It is used to obtain the geographical coordinates where the current browser is located, so as to provide LBS (Location Based Services). If you are hungry, software such as food delivery, Didi taxi, and Gaode navigation all use LBS, including the following data:
Meridity: longitude
Latitude: Latitude
Altitude: Altitude
Speed: Speed
Use the platform to be divided into mobile and PC end:
(1) Mobile browser:
First try to use the built-in GPS data- accuracy is based on rice
Then use the mobile base station number to reverse the corresponding geographical location-positioning accuracy is in the unit
(2) PC browser:
Reverse query through the IP address of the computer-
Topic:
So how do we get positioning information from HTML5?First of all, we press F12 to open Console in the browser and enter Window.navigator.Geology to see the positioning information!
We see that there are three main methods in the positioning information, and the meaning is:
Getcurrentposition: Fn (Succ, ERR) // Get the current positioning data, which contains Watchposition, which is successful and failed to obtain and fails.
Since then we know how to use geographical positioning in the HTML5 file. We use the development tool to create a HTML file and create a button. When clicking the button, the positioning information is displayed in the background!
<! Doctype html> <html> <head lang = EN> <meta charset = UTF-8> </Title> </Head> <body> <Button ID = BTN> > <script> btn.onClick = Function () {// Click the button to trigger navigator.Geolocation.GetcurrentPosition (Succcb, ERRCB); Function Succcb (POS) {// Successful acquisition function! Intersection console.log ('Successful obtaining the positioning data'); console.log ('latitude:'+pos.coords.longitude); console.log ('+pos.coords.Latitude); console.log (' ' Height: '+POS.COORDS.ALTITUDE); Console.log (' Speed: '+POS.Coords.Speed); Intersection console.log ('Get the failed positioning data'); console.log (err.message); // Output failed information or reason! }} </script> </body> </html>As shown in the figure, when the click button, the positioning data is successfully obtained, but the height and speed are NULL because of the PC side, so we only need to remember one method to get geographical positioning in HTML5!
Navigator.Geolocation.getCurrentposotion (Function (POS) {console.log ('' Location data acquisition successful '); // pos.coords.longtitude ....} (Err) {console.log (' ' Positioning data acquisition failed '); // err.code err.message}) 2. Use third-party tools-Baidu MapAs I mentioned in the foreword, the use of Baidu Maps in the project and many mobile applications provides users to select the positioning information. So how do we use Baidu maps in our own project?
First of all, we have to know that the source code of Baidu Map will not be downloaded to everyone. This involves the interests of the company. It is not necessary to say that people do n’t have to say, but Baidu is still a very conscience company. use!
Use steps:
First open the official website http://lbsyun.baidu.com/, and then pull it to the bottom:
It can be seen that Baidu Map can be used for web development, Android development, iOS development. Here we use web development and click JavaScript API
URL: http://lbsYun.baidu.com/index.php? Title = jspopular
We can go to many cases and function display in the 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 you pop up the login interface, log in, log in to the registered developer account (since I have been registered, so I can’t demonstrate it here. Enter the related mobile phone, mailbox, and then verify in the mailbox. After the verification is successful, click to create an application, the following interface will appear:
Fill in the application name at will
Application Type Selection --- Browser Nide
REFERER List: Refers to who can access your application, how can you access your application in how to access it, and fill in a star number ' *' here, which means that all people can access it, because only testing can be done, and the project can be done in the future. If you use it, there will be related encryption methods and so on! Intersection Then click Submit to complete the creation! Intersection
After the creation of the application, the following interface appears:
Here it will show the application number, application name, and the most important access application code created here, which is the key mentioned earlier!
After getting the key, we return to the homepage http://lbsyun.baidu.com/index.php?title=jspopular
Click on the development guide on the left, you can see the usage of related APIs and cases! Intersection This API is the most conscience in the API, there is no nonsense,
The writing is very detailed and easy to understand, because there are too many, just introduce a few main usage here! Intersection Intersection
We create a new HTML file and copy the above code to the HTML file
<! Doctype html> <html> <wead> <meta charset = UTF-8/> <script type = text/javascript src = http: //api.map.baidu.com/api? V = 2.0 & ak = jrbp = jrbp IU6JCBPSXGVDQXAC0C. .....> //v2.0 version quotation method: src = http://api.map.baidu.com/api? v = 2.0 & ak = Your key //v1.4 version, previous version, and previous version Reference method: src = http://api.map.baidu.com/api? V = 1.4 & key = Your key & callback = initialize </script> <Style> #Container {width: 800px; height: 500 px; } </style> </head> <body> <H1> Use Baidu Map </h1> <div ID = Container> </DIV> <Script Type = Text/JavaScript> // Create a map instance to avoid heavy weight with MAP Name, so use BMAP.MAP VAR MAP = New BMAP.MAP (Container); // Create point coordinates var point = New Bmap.point (113.946317,22.549008); // Initialize maps, set center point coordinates and map levels 1 ~ ~ Level 18 Map.centerandzoom (Point, 18); // Mouse rolling, maps to entertain Map.enableScrollwheelzoom (TRUE); // Add map control map.addcontrol (new bmap.navigationControl ()); Map.a DDControl (New Bmap.overViewMapControl ()); Map.addControl (new bmap.scaleControl ()); Map.addControl (new bmap.maptypecontrol ()); er (point); < /script> </body> </html>Use Baidu Map:
OK, we successfully used Baidu maps in the html file. Now we can use Baidu Maps like http://map.baidu.com! Intersection
Related function description:
<script src = http://api.map.baidu.com/api? v = 2.0 & ak = Visiting secrets of your website on Baidu Map Application> </script>
Enter the long trunk key in AK to quote Baidu Map! Intersection
Create a map instance-must be selected.
var map = new bmap.map (container);
Create a specified point, your latitude and longitude information! Intersection If you don't know, you can use the previous one
Navigator.Geology.getCurrentPosotion method to obtain latitude and longitude-must be selected.
var point = new bmap.point (116.300982,39.915907);
Display map numbers at the centered point as the center, 17 refers to the level, and the level can be divided into level 1 to 18. The smaller the level of the level, the larger the range of the map, and the larger the level of the level. The map effect! Intersection --- Must-choose.
map.centerandzoom (Point, 17);
The map can be selected with the mouse-option.
map.enableScrollwheelzoom (TRUE);
The map shows control-the effect is tested by itself. This is not the main function here no longer explained --- optional.
map.addcontrol (new bmap.navigationControl ()); Map.addControl (new bmap.overViewMapControl ()); Map.addControl (New Bmap.ScaleControl ()); .addcontrol (new bmap.maptypecontrol ());
Show a label on the map (label)-optional
var Marker = Map.addoverlay (New Bmap.marker (Point));
OK, third -party Baidu map is said here, there are many fun functions that can be used by themselves, so the methods and parameters can be found in the API!
The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.