Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der HTML5-Geolokalisierung und der Anwendung der Drittanbieter-Tools Baidu Maps

Ausführliche Erläuterung der HTML5-Geolokalisierung und der Anwendung der Drittanbieter-Tools Baidu Maps

黄舟Original: 2017-03-13 17:23:091923Durchsuche

Dieser Artikel stellt hauptsächlich die Anwendung von HTML5-Geolokalisierung und dem Drittanbieter-Tool Baidu Map vor. Interessierte Freunde können darauf verweisen

Vorwort:
Ich habe viele technische Experten und verwandte Blogs gesehen, aber es gibt nur sehr wenige Beschreibungen der Geopositionierung in HTML5. Ich weiß nicht, ob sie es nicht erwähnen wollen oder weil es selten vorkommt Persönlich habe ich aus einer kleinen Erfahrung zwei Gründe zusammengefasst:
Erstens, Dienstanbieter Gründe, weil die HTML5-Positionierung von Google bereitgestellt wird und aufgrund des Google-Verbots auf dem chinesischen Festland keine Positionierungsfunktion vorhanden ist Dies ist der Hauptgrund. Zweitens weist die integrierte Geolokalisierung von HTML5 im Vergleich zu Tools von Drittanbietern – wie Baidu Maps usw. – eine schlechte Leistung auf In Projekten wird es selten verwendet. Verwenden Sie die Geolokalisierung, die mit nativem HTML5 geliefert wird. Dies ist ein sekundärer Grund!

1. Die neue Funktion von HTML5 – Geolokalisierung
Da Geolokalisierung eine neue Funktion von HTML5 ist, müssen wir auch die zugehörige API erlernen und beherrschen Erfahren Sie, wie Sie die Geolokalisierung nutzen.Verstehen Sie zunächst den gesunden Menschenverstand.

Ein neuer Begriff

Geolocation:

wird verwendet, um das Geografische zu erhalten Koordinaten des aktuellen Browserstandorts, wodurch LBS (Location Based Service) wie Hungry Me Food Delivery, Didi Taxi und Amap Navigation bereitgestellt werden, die alle LBS verwenden, einschließlich der folgenden Daten:

Längengrad: Längengrad
Breitengrad: Breitengrad
Höhe: Höhe
Geschwindigkeit: Geschwindigkeit

Die Nutzungsplattform ist in Mobilgeräte und PC unterteilt:

(1) Mobiler Browser:
Versuchen Sie es zunächst mit dem integrierten in GPS-Daten -
Die Genauigkeit wird in Metern angegeben
Verwenden Sie dann die Nummer der Mobilfunk-Basisstation, um umgekehrt auf den entsprechenden geografischen Standort zu schließen - die Positionsgenauigkeit wird in Kilometern angegeben( 2) PC-Browser:
Umgekehrte
Abfrage über die IP-Adresse des Computers——Die Genauigkeit ist in Kilometern

Hauptthema:

Wie erhalten wir also Positionierungsinformationen aus HTML5?
Zuerst drücken wir F12 im Browser, um die Konsole zu öffnen, geben window.navigator.geolocation ein, um die Positionsinformationen anzuzeigen!

Ausführliche Erläuterung der HTML5-Geolokalisierung und der Anwendung der Drittanbieter-Tools Baidu Maps

Wir sehen, dass es drei Hauptmethoden zur Positionierung von Informationen gibt, die Bedeutungen sind:

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

Da wir nun wissen, wie man Geolokalisierung in HTML5-Dateien verwendet, verwenden wir Entwicklungstools, um eine HTML-Datei zu erstellen und eine Schaltfläche zu erstellen. Wenn auf die Schaltfläche geklickt wird, werden die Standortinformationen im Hintergrund angezeigt!

<!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>

Ausführliche Erläuterung der HTML5-Geolokalisierung und der Anwendung der Drittanbieter-Tools Baidu Maps

Wie im Bild gezeigt, werden beim Klicken auf die Schaltfläche die Positionierungsdaten erfolgreich abgerufen, aber die Höhe und Geschwindigkeit liegt an der PC-Seite. Der Grund ist

Null, daher müssen wir uns nur eine Methode merken, um die Geolokalisierung in HTML5 zu erhalten!

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

2. Verwenden Sie Tools von Drittanbietern – Baidu Maps

Wie ich im Vorwort erwähnt habe, In Projekten und vielen mobilen Anwendungen wird Baidu Map verwendet, um Benutzern Standortinformationen bereitzustellen. Wie verwenden wir Baidu Map in unseren eigenen Projekten?

Zunächst müssen wir wissen, dass der Quellcode von Baidu Maps nicht jedem zum Download zur Verfügung gestellt wird. Dies betrifft nicht die Interessen des Unternehmens, sondern Baidu ist immer noch ein sehr gewissenhaftes Unternehmen und ermöglicht uns die Registrierung eines Entwicklerkontos für die Entwicklung und Nutzung!

Schritte zur Verwendung:

Öffnen Sie zuerst die offizielle Website http://lbsyun.baidu.com/ und scrollen Sie dann nach unten:

Ausführliche Erläuterung der HTML5-Geolokalisierung und der Anwendung der Drittanbieter-Tools Baidu Maps

Wie Sie sehen können, kann Baidu Maps für die Webentwicklung,

Android-Entwicklung und iOS-Entwicklung verwendet werden. Hier verwenden wir Webentwicklung, klicken Sie auf JavaScript API Website:
http://lbsyun.baidu.com/index.php?title=jspopular

Wir können auf viele Fälle und Funktionsdemonstrationen in der API zugreifen Karten, Sie müssen zuerst den Schlüssel erhalten!

Ausführliche Erläuterung der HTML5-Geolokalisierung und der Anwendung der Drittanbieter-Tools Baidu Maps

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

Ausführliche Erläuterung der HTML5-Geolokalisierung und der Anwendung der Drittanbieter-Tools Baidu Maps

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

Ausführliche Erläuterung der HTML5-Geolokalisierung und der Anwendung der Drittanbieter-Tools Baidu Maps

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

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

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

Ausführliche Erläuterung der HTML5-Geolokalisierung und der Anwendung der Drittanbieter-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>

使用百度地图：

Ausführliche Erläuterung der HTML5-Geolokalisierung und der Anwendung der Drittanbieter-Tools Baidu Maps

OK，我们成功的在HTML文件中使用了百度地图，现在可以像在http://www.php.cn/中一样使用百度地图了！！

In Verbindung stehende Artikel

Mehr sehen