Detailed explanation of HTML5 geolocation and the application of third-party tools Baidu Maps-H5 Tutorial-php.cn

This article mainly introduces the application of HTML5 geolocation and third-party tool Baidu Map in detail. It has certain reference value. Interested friends can refer to it

Foreword:
I have seen a lot of technical experts and related blogs, but there are very few descriptions of HTML5 geolocation. I don’t know if they are unwilling to mention it or because it is rarely used. I personally press A little bit of experience summarizes two reasons:
First, Service reasons, because HTML5 positioning is provided by Google, and due to Google’s ban on mainland China, the positioning function is no longer supported. , this is the main reason
Secondly, HTML5’s built-in geolocation has poor performance. Compared with third-party tools---like Baidu Maps, etc., it is not on the same level. When developing real projects, it is rarely used Use the geolocation that comes with native HTML5, this is a secondary reason!

1. The new feature of HTML5-geographic positioning
Since geographical positioning is a new feature of HTML5, we also need to learn and master the related API And learn how to use geolocation
First understand some common sense

A new termGeolocation:

is used to obtain The geographical coordinates of the current browser location, thereby providing LBS (Location Based Service). Software such as Hungry Me Food Delivery, Didi Taxi, and Amap Navigation all use LBS, including the following data:
Longitude: longitude
Latitude: latitude
Altitude: altitude
Speed: speed

The usage platform is divided into mobile and PC:
(1) Mobile browser:
First Try to use the built-in GPS data - The accuracy is in meters
Then use the mobile phone base station number to reversely deduce the corresponding geographical location - the positioning accuracy is in kilometers
(2)PC browser:
Reverse query through the computer’s IP address——The accuracy is in kilometers

Topic:

So how do we obtain positioning information from HTML5?
First, we press F12 in the browser to open the console, enter window.navigator.geolocation to see the positioning information!

Detailed explanation of HTML5 geolocation and the application of third-party tools Baidu Maps

We see that there are three main methods for positioning information, the meanings are:

getCurrentPosition:fn(succ,err) //获取当前定位数据,其中包含成功获取和获取失败的回调函数
watchPosition: fn   //监视定位数据
clearWatch: fn   //清除定位监视

Copy after login

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

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body>  
<button id="btn">获得我的定位数据</button>  
<script>  
    btn.onclick=function(){   //点击按钮时触发  
        navigator.geolocation.getCurrentPosition(succCB,errCB);  
  
        function succCB(pos){  //成功的获取回调函数！！  
            console.log(&#39;成功获取到定位数据&#39;);  
            console.log(&#39;纬度:&#39;+pos.coords.longitude);  
            console.log(&#39;经度:&#39;+pos.coords.latitude);  
            console.log(&#39;高度:&#39;+pos.coords.altitude);  
            console.log(&#39;速度:&#39;+pos.coords.speed);  
  
        }  
        function errCB(err){  //获取失败的回调函数！！  
            console.log(&#39;获取到定位数据失败&#39;);  
            console.log(err.message);  //输出失败的信息或原因！  
        }  
    }  
</script>  
</body>  
</html>

Copy after login

Detailed explanation of HTML5 geolocation and the application of third-party tools Baidu Maps

As shown in the figure, when the button is clicked, the positioning data is successfully obtained, but the height and speed are not correct due to PC issues. is

Null, so we only need to remember one method to get geolocation in HTML5!

navigator.geolocation.getCurrentPosotion(
function(pos){
console.log(&#39;定位数据获取成功&#39;);
//pos.coords.longtitude ....
},
function(err){
console.log(&#39;定位数据获取失败&#39;);
//err.code   err.message
}
)

Copy after login

2. Use third-party tools--Baidu Map

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

First of all, we need to know that the source code of Baidu Maps will not be provided for everyone to download. This involves the interests of the company. People who understand do not need to say more, but Baidu is still a very conscientious company and allows us to register. Developer account for development and use!

Usage steps:

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

Detailed explanation of HTML5 geolocation and the application of third-party tools Baidu Maps ##As you can see, Baidu Maps can be used for web development,

Android

development, and ios development. Here we use web development, click JavaScript APIWebsite: http://lbsyun.baidu.com/index.php?title=jspopular
We can go to many cases and function demonstrations in the API. To use Baidu Maps, you must first obtain the key!

稍后会解释什么是密钥，先点击进入页面，如果弹出登陆界面的话，则登陆，登陆点击注册开发者账号(由于我已近注册了，所以这里无法给大家演示，需要大家自己操作)，输入相关的手机，邮箱，然后到邮箱里面验证，验证成功后,，点击创建应用，会出现如下界面：

Detailed explanation of HTML5 geolocation and the application of third-party tools Baidu Maps

应用名称随意填写一个
应用类型选择---浏览器端
Referer白名单：指的是谁可以访问你的应用，通过什么方式访问你的应用，这里填写一个星号' * '，意思是全部人都可以访问，因为只是做测试可以这样做，到以后项目如果使用到，会有相关的加密方式等等！！然后点击提交完成创建！！
完成应用的创建后，出现如下界面：

Detailed explanation of HTML5 geolocation and the application of third-party tools Baidu Maps

这里会显示刚才创建的应用编号，应用名称，以及最重要的访问应用码，就是前面提到的密钥!

然后得到密钥之后，我们回到主页http://lbsyun.baidu.com/index.php?title=jspopular

点击左侧的开发指南，可以看到相关API的用法以及案例！！，这个API是小编看到的所以API中最良心的，没有一句废话，
写的很详细，通俗易懂，因为实在太多了，就在这里介绍几个主要的用法！！！

Detailed explanation of HTML5 geolocation and the application of third-party tools Baidu Maps

我们创建一个新的HTML文件，将上面这段代码复制到HTML文件中

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8"/>  
  
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=jrbPiu6jcbPsxGvdQXAc0C......">  
        //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"  
        //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"  
    </script>  
  
    <style>  
        #container{  
            width: 800px;  
            height: 500px;  
        }  
    </style>  
</head>  
  
<body>  
<h1>使用百度地图</h1>  
<p id="container"></p>  
<script type="text/javascript">  
    // 创建地图实例，避免与Map重名，所以使用BMap.Map  
    var map = new BMap.Map("container");  
    // 创建点坐标  
    var point = new BMap.Point(113.946317,22.549008);  
    // 初始化地图，设置中心点坐标和地图级别 1~18级  
    map.centerAndZoom(point, 18);  
  
    //鼠标滚动，地图缩放  
    map.enableScrollWheelZoom(true);  
  
    //添加地图控件  
    map.addControl(new BMap.NavigationControl());  
    map.addControl(new BMap.OverviewMapControl());  
    map.addControl(new BMap.ScaleControl());  
    map.addControl(new BMap.MapTypeControl());  
  
    //添加地图标注  
    var marker=map.addOverlay(new BMap.Marker(point));  
  
     
    
  
</script>  
</body>  
</html>

Copy after login

使用百度地图：

Detailed explanation of HTML5 geolocation and the application of third-party tools Baidu Maps