Die Anwendung der geografischen Positionierung von HTML5 und der dritten -party -Tool Baidu -Karte

Ich habe viele technische Daniels und verwandte Blogs gesehen und die geografische Positionierung von HTML5 selten beschrieben.

Erstens wird der Grund für Dienstleister, da die Positionierung von HTML5 von Google bereitgestellt wird, da Google das Festland blockiert hat, die Positionierungsfunktion nicht unterstützt.

Zweitens hat die geografische Positionierung mit HTML5 eine schlechte Leistung.

Da die geografische Positionierung ein neues Merkmal von HTML5 ist, müssen wir auch APIs lernen und beherrschen und lernen, wie die geografische Positionierung verwendet wird

Zuerst den gesunden Menschenverstand verstehen

Eine neue Substantivgeologie:

Es wird verwendet, um die geografischen Koordinaten zu erhalten, in denen sich der aktuelle Browser befindet, um LBS (standortbasierte Dienste) bereitzustellen. Daten:

Verdienst: Länge

Breite: Breitengrad

Höhe: Höhe

Geschwindigkeit: Geschwindigkeit

Verwenden Sie die Plattform, um in das Mobil- und PC -Ende unterteilt zu werden:

(1) Mobiler Browser:

Versuchen Sie zunächst, die integrierte GPS- Datengenauigkeit zu verwenden. Die Genauigkeit basiert auf Reis

Verwenden Sie dann die mobile Basisstationsnummer, um die entsprechende geografische Standortpositionierungsgenauigkeit in der Einheit umzukehren

(2) PC -Browser:

Umfragen Sie die Abfrage durch die IP-Adresse des Computers.

Thema:

Zunächst drücken wir F12, um die Konsole im Browser zu öffnen und in das Fenster zu gehen. Navigator.Geology, um die Positionierungsinformationen anzuzeigen!

Wir sehen, dass es drei Hauptmethoden in den Positionierungsinformationen gibt, und die Bedeutung lautet:

 GetCurrentPosition: FN (Procc, Err) // Die aktuellen Positionierungsdaten erhalten, die die Uhrenbeschwerde enthalten, die erfolgreich ist und nicht erhalten ist und fehlschlägt.

Seitdem wissen wir, wie die geografische Positionierung in der HTML5 -Datei verwendet wird.

 <! {// Klicken Sie auf die Schaltfläche, um Navigator.Geolocation.getCurrentPosition (SUCKCB, ERRCB); Überschneidung console.log ('erfolgreich die Positionierdaten'); '+Pos.coords.AlTitude); Überschneidung console.log ('fehlgeschlagene Positionierungsdaten'); }} </script> </body> </html>

Wie in der Abbildung gezeigt, wird bei der Klick -Schaltfläche die Positionierungsdaten erfolgreich erhalten, aber die Höhe und Geschwindigkeit sind aufgrund der PC -Seite null. Daher müssen wir uns nur an eine Methode erinnern, um die geografische Positionierung in HTML5 zu erhalten!

 Navigator.geolocation.getCurrentPosotion (Funktion (pos) {console.log ('Standortdatenerfassung erfolgreich'); // pos.coords.longtitude ....} (err) {console.log ('' Positionierungsdatenerfassung fehlgeschlagen '); // err.code err.message})

Wie ich im Vorwort erwähnt habe, bietet die Verwendung von Baidu -Karten im Projekt und vielen mobilen Anwendungen den Benutzern die Auswahl der Positionierungsinformationen.

Zunächst müssen wir wissen, dass der Quellcode der Baidu -Karte nicht an jeden heruntergeladen wird. Ein sehr Gewissensunternehmen.

Schritte verwenden:

Öffnen Sie zuerst die offizielle Website http://lbyun.baidu.com/ und ziehen Sie sie dann nach unten:

Es ist zu sehen, dass Baidu -Karte für die Webentwicklung, die Android -Entwicklung und die Entwicklung von iOS verwendet werden kann.

URL: http://lbyun.baidu.com/index.php?

Wir können in viele Fälle in die API gehen und Baidu -Karten verwenden.

Ich werde später erklären, was der Schlüssel ist. Geben Sie das zugehörige Mobiltelefon und den Postfach ein und überprüfen Sie dann in der Mailbox.

Füllen Sie den Bewerbungsnamen nach Belieben ein

Auswahl des Anwendungstyps --- Browser Nide

Referer -Liste: Bezieht sich auf die, wer auf Ihre Anwendung zugreifen kann, wie Sie auf Ihre Anwendung zugreifen können, um darauf zuzugreifen, und hier eine Sternnummer ausfüllen. Und das Projekt kann in Zukunft durchgeführt werden. Überschneidung Klicken Sie dann auf Senden, um die Erstellung zu vervollständigen! Überschneidung

Nach der Erstellung der Anwendung wird die folgende Schnittstelle angezeigt:

Hier werden die Anwendungsnummer, der Anwendungsname und den wichtigsten Zugriffscodes für den Zugriff angezeigt, das der zuvor erwähnte Schlüssel ist!

Nachdem wir den Schlüssel erhalten haben, kehren wir zur Homepage http://lbyun.baidu.com/index.php?title=jspopular zurück

Klicken Sie auf den Entwicklungshandbuch links. Sie können die Verwendung verwandter APIs und Fälle sehen! Überschneidung Diese API ist das größte Gewissen in der API, es gibt keinen Unsinn.

Das Schreiben ist sehr detailliert und leicht zu verstehen, da es zu viele gibt, nur ein paar Hauptnutzungen hier vorstellen! Überschneidung Überschneidung

Wir erstellen eine neue HTML -Datei und kopieren den oben genannten Code in die HTML -Datei

 <! = JRBP IU6JCBPSXGVDQXAC0C. Vorgängerversion und Referenzmethode der Vorgängerversion: src = http://api.map.baidu.com/api? ; Höhe: 500 px; MAP -Instanz, um ein starkes Gewicht mit Kartenname zu vermeiden. Mittepunktkoordinaten und Kartenstufen 1 ~ ~ ~ Stufe 18 MAP.CenterAnszoom (Punkt, 18); ) MAP.A DDCONTROL (neuer BMAP.OverviewMapControl ()); Body> </html>

Verwenden Sie die Baidu -Karte:

OK, wir haben Baidu Maps in der HTML -Datei erfolgreich verwendet. Überschneidung

Verwandte Funktionsbeschreibung:

 <script src = http://api.map.baidu.com/api?

Geben Sie den langen Kofferraumtast in AK ein, um Baidu Map zu zitieren! Überschneidung

Erstellen Sie eine Karteninstanz-Must ausgewählt.

var map = new bmap.map (Container);

Erstellen Sie einen bestimmten Punkt, Ihre Informationen zu Breitengraden und Längengrad! Überschneidung Wenn Sie es nicht wissen, können Sie den vorherigen verwenden

Navigator.geology.getCurrentPosotion-Methode zur Auswahl von Breitengraden und Längengrad-Must.

var point = neuer BMAP.Point (116.300982,39,915907);

Anzeigen Sie die Kartennummern am zentrierten Punkt an, wenn sich das Zentrum auf die Ebene bezieht, und das Level kann in Stufe 1 bis 18 unterteilt werden. Je kleiner der Niveau der Ebene ist, desto größer ist der Bereich der Karte und je größer die Ebene des Levels. Überschneidung --- Muss.

MAP.CenterAnzoom (Punkt, 17);

Die Karte kann mit der Mausoption ausgewählt werden.

map.EnablesCrollWheelzoom (true);

Die Karte zeigt die Kontrolle-der Effekt wird von selbst getestet.

 MAP.AddControl (neue BMAP.NavigationControl ());

Zeigen Sie ein Etikett auf der Karte (Etikett) -Optional

var marker = map.adDoverlay (neuer BMAP.Marker (Punkt));

OK, dritte -Party Baidu -Karte wird hier gesagt, es gibt viele lustige Funktionen, die von sich selbst verwendet werden können, sodass die Methoden und Parameter in der API gefunden werden können!

Das oben genannte ist der Inhalt dieses Artikels.