L'application du positionnement géographique HTML5 et de la carte Baidu de l'outil de troisième partie

J'ai vu beaucoup de Daniel technique et des blogs connexes, et j'ai rarement décrit le positionnement géographique de HTML5.

Premièrement, la raison des prestataires de services, car le positionnement de HTML5 est fourni par Google, car Google a bloqué le continent, la fonction de positionnement n'est pas prise en charge.

Deuxièmement, le positionnement géographique est livré avec HTML5.

Étant donné que le positionnement géographique est une nouvelle caractéristique de HTML5, nous devons également apprendre et maîtriser les API connexes et apprendre à utiliser le positionnement géographique

Comprendre d'abord le bon sens

Une nouvelle géologie du nom:

Il est utilisé pour obtenir les coordonnées géographiques où se trouve le navigateur actuel, afin de fournir des LB (services basés sur la localisation). données:

Méridité: longitude

Latitude: latitude

Altitude: Altitude

Vitesse: vitesse

Utilisez la plate-forme pour être divisée en mobile et en PC:

(1) navigateur mobile:

Essayez d'abord d'utiliser la précision GPS intégrée est basée sur le riz

Ensuite, utilisez le numéro de station de base mobile pour inverser la précision de positionnement de l'emplacement géographique correspondant est dans l'unité

(2) navigateur PC:

Requête inversée via l'adresse IP de l'ordinateur

Sujet:

Tout d'abord, nous appuyons sur F12 pour ouvrir la console dans le navigateur et entrez Window.Navigator.Geology pour voir les informations de positionnement!

Nous voyons qu'il existe trois méthodes principales dans les informations de positionnement, et le sens est:

 GetCurrentPosition: fn (succ, err) // Obtenez les données de positionnement actuelles, qui contient WatchPosition, qui réussit et n'a pas réussi à obtenir et à échouer.

Depuis lors, nous savons comment utiliser le positionnement géographique dans le fichier HTML5.

 <! ? Intersection Console.log («réussite à l'obtention des données de positionnement»); '+ Pos.coords.altitude); Intersection console.log («obtenir les données de positionnement défaillées»); }} </ script> </ body> </html>

Comme le montre la figure, lorsque le bouton de clic, les données de positionnement sont obtenues avec succès, mais la hauteur et la vitesse sont nulles en raison du côté PC, nous n'avons donc qu'à nous rappeler une méthode pour obtenir un positionnement géographique dans HTML5!

 Navigator.Geolocation.getCurrentPosotion (fonction (pos) {Console.log ('' Location Acquisition de données réussie '); // pos.coords.longtitude ... ');

Comme je l'ai mentionné dans la préface, l'utilisation de cartes Baidu dans le projet et de nombreuses applications mobiles fournissent aux utilisateurs pour sélectionner les informations de positionnement.

Tout d'abord, nous devons savoir que le code source de la carte Baidu ne sera pas téléchargé sur tout le monde. Une entreprise très consciente.

Utiliser les étapes:

Ouvrez d'abord le site officiel http://lbsyun.baidu.com/, puis tirez-le en bas:

On peut voir que la carte Baidu peut être utilisée pour le développement Web, le développement Android, le développement iOS.

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

Nous pouvons aller dans de nombreux cas et afficher les fonctions dans l'API.

Je vais expliquer ce que la clé est plus tard. Entrez le téléphone mobile connexe, la boîte aux lettres, puis vérifiez dans la boîte aux lettres.

Remplissez le nom de l'application à volonté

Sélection du type d'application --- Nide du navigateur

Liste des références: fait référence à qui peut accéder à votre application, comment pouvez-vous accéder à votre application dans la façon d'y accéder et de remplir un numéro d'étoile '*' ici, ce qui signifie que tout le monde peut y accéder, car seuls les tests peuvent être effectués et Le projet peut être réalisé à l'avenir. Intersection Cliquez ensuite sur Soumettre pour terminer la création! Intersection

Après la création de l'application, l'interface suivante apparaît:

Ici, il affichera le numéro d'application, le nom de l'application et le code d'application d'accès le plus important créé ici, qui est la clé mentionnée plus tôt!

Après avoir obtenu la clé, nous retournons sur la page d'accueil http://lbsyun.baidu.com/index.php?title=jspopular

Cliquez sur le guide de développement à gauche, vous pouvez voir l'utilisation des API et des cas connexes! Intersection Cette API est la plus conscience de l'API, il n'y a pas de non-sens,

L'écriture est très détaillée et facile à comprendre, car il y en a trop, introduisez simplement un usage principal ici! Intersection Intersection

Nous créons un nouveau fichier HTML et copie le code ci-dessus dans le fichier HTML

 <! = jrbp iu6jcbpsxgvdqxac0c. Version précédente et méthode de référence précédente: src = http://api.map.baidu.com/api? ; Instance de carte pour éviter le poids de la carte, utilisez donc BMAP.map var map = new Bmap.map (conteneur); Coordonnées du point central et niveaux de carte 1 ~ ~ niveau 18 map.CenterandZoom (point, 18); )); corps> </ html>

Utilisez la carte Baidu:

Ok, nous avons utilisé avec succès les cartes Baidu dans le fichier HTML. Intersection

Description de la fonction associée:

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

Entrez la longue touche du coffre dans AK pour citer la carte Baidu! Intersection

Créer une instance de carte.

var map = new Bmap.map (conteneur);

Créez un point spécifié, vos informations de latitude et de longitude! Intersection Si vous ne le savez pas, vous pouvez utiliser le précédent

Navigator.Geology.getCurrentPosotion Méthode pour obtenir la latitude et la longitude.

var point = new BMAP.point (116.300982,39.915907);

Afficher les numéros de carte au point centré comme le centre, 17 se réfère au niveau et le niveau peut être divisé en niveau 1 à 18. Plus le niveau du niveau est petit, plus la plage de la carte est grande et plus le niveau est grand du niveau. Intersection --- incontournable.

Map.CenterandZoom (Point, 17);

La carte peut être sélectionnée avec l'option de souris libre.

map.enablesCrollWeelZoom (true);

La carte montre le contrôle - l'effet est testé par lui-même.

 Map.AddControl (new Bmap.NavigationControl ());

Afficher une étiquette sur la carte (étiquette) -Optional

var marqueur = map.AdDoverlay (new BMAP.marker (point));

OK, la carte Baidu de troisième partie est dite ici, il existe de nombreuses fonctions amusantes qui peuvent être utilisées par elles-mêmes, de sorte que les méthodes et les paramètres peuvent être trouvés dans l'API!

Ce qui précède est tout le contenu de cet article.