Utilisation de vecteurs dans Google Maps

Les cartes générées avec le API Javascript de Google Maps Ils ne seront pas toujours statiques, bien qu'ils soient utilisés la plupart du temps pour la visualisation, ce n'est pas toujours le cas, c'est pourquoi il y aura parfois des occasions où nous devrons étendre leur portée afin qu'ils puissent y afficher des informations supplémentaires.
Cette information supplémentaire que nous devons inclure est obtenue avec le vecteur qui ne sont rien de plus que des formes constituées de points, où tous les types de vecteurs utilisés par le API Elles sont appelées superpositions ou superposition.
RecommandationDans les tutoriels précédents, nous avons vu l'introduction à API, nous avons passé en revue les options les plus importantes, nous avons appris comment obtenir les informations d'identification pour les développeurs de Google et nous réalisons quelques exemples simples de son utilisation, donc avant de lire le contenu de ce tutoriel ou de faire les exemples mentionnés ici, nous vous recommandons de jeter un œil à ce tutoriel.
Après avoir parcouru le tutoriel recommandé et étant en contexte, passons aux exemples pratiques, ceci pour une meilleure compréhension de l'utilisation des vecteurs dans nos cartes générées avec l'API.
L'utilisation des cartes générées avec le API il est le plus souvent concentré sur des sites internet où sa fonction principale est de montrer la localisation d'une entreprise ou d'un commerce. Nous pouvons appeler cela un point d'intérêt que nous pouvons le représenter sans aucun problème avec un type de vecteur, qui pour les besoins de la API Javascript de Google Maps est connu comme marqueur.
Sans plus tarder, voyons les étapes que nous devons suivre pour implémenter un marqueur standard et en plus un personnalisé dans notre carte.
1- La première chose que nous devons faire est d'inclure le API et les styles pour la visualisation de notre carte, il est important de noter que nous devons utiliser notre Identifiant de développeur Google pour le bon fonctionnement de cet exemple :

2- Nous définissons nos variables globales, une carte et une série de variables que nous utiliserons pour générer des marqueurs aléatoires en fonction des coordonnées qui entourent la zone de Madrid.:

 carte var; var minLat = 38, maxLat = 41, minLng = -3, maxLng = -9, markerId = 1; 

3- Ensuite, nous définissons la fonction d'initialisation de notre carte, qui contiendra les options les plus importantes pour elle comme zoom, type de base pour la carte et coordonnées du centre qui dans ce cas seront ceux de Madrid, on obtient le identifiant du div par le SOLEIL, nous initialisons la carte et définissons une fonction pour gérer les événements lorsque nous positionnons les marqueurs sur la carte, regardons le segment de code que nous venons de décrire :

 function initializeMap () {google.maps.visualRefresh = true; var mapOptions = {centre : nouveau google.maps.LatLng (40.41678, -3.70379), zoom : 5, mapTypeId : google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap'); map = new google.maps.Map (mapElement, mapOptions); événementsMarqueur (); } 

4- Maintenant, nous devons construire notre fonction marqueur d'événements () qui aura dans sa définition deux événements liés par clic selon l'ID qui est pressé à partir de deux liens différents et qui appellera deux autres fonctions qui seront chargées de définir les signets :

 functionMarkerEvents () {document.getElementById ('add_Marker').addEventListener ('click', function () {addMarker ();}); document.getElementById ('add_person_Marker').addEventListener ('click', function () {addPersonMarker ();}); } 

5- Avant de construire les deux fonctions qui vont positionner les marqueurs, il est important de travailler sur les coordonnées afin qu'elles nous fournissent des valeurs aléatoires dans cette plage et qu'elles puissent être interprétées par le API Javascript de Google Maps, nous allons le faire avec quelques opérations arithmétiques sur les variables globales des coordonnées, voyons la fonction correspondante :

 fonction createLaLgRandom () {var deltaLat = maxLat - minLat; var deltaLng = maxLng - minLng; var rndNumLat = Math.random (); var newLat = minLat + rndNumLat * deltaLat ; var rndNumLng = Math.aléatoire (); var newLng = minLng + rndNumLng * deltaLng; retourner le nouveau google.maps.LatLng (newLat, newLng); } 

6- Une fois cela fait, nous pouvons construire nos fonctions pour fixer les marqueurs à notre carte, pour cela nous le faisons avec la méthode Marqueur Pour générer un marqueur standard et avec la fonction précédente nous générons la coordonnée aléatoire où il sera affiché :

 function addMarker () {var coordonnée = createLgRandom (); var marker = new google.maps.Marker ({position : coordonnée, carte : carte, titre : 'Marqueur aléatoire -' + markerId}); identifiant de marqueur ++; } 

Avant de passer à notre signet personnalisé Il est important de mentionner qu'il est basé sur des icônes et celles-ci doivent être disponibles dans le répertoire de notre projet, pour cet exercice certaines des icônes gratuites disponibles sur la page mapicons ont été utilisées dans la catégorie Marqueurs, ils fonctionneront donc pour nous sans aucun problème, pour cela nous en téléchargeons et les plaçons dans un dossier appelé img situé à la racine de notre projet comme on peut le voir sur l'image suivante :

AGRANDIR

7- Après avoir nos icônes nous n'avons plus qu'à construire notre fonction, pour cela nous créons un tableau avec les noms de nos icônes et nous allons les exécuter aléatoirement, en donnant un paramètre supplémentaire à notre méthode Marqueur appelé icône qui utilisera l'image téléchargée pour définir le marqueur :

 function addPersonMarker () {var markerIcons = ['comics', 'videogames', 'computers', 'hotfood', 'bike_rising']; var rndMarkerId = Math.floor (Math.random () * markerIcons.length); var coordonnée = createLaLgRandom (); var marker = new google.maps.Marker ({position : coordonnée, carte : carte, icône : 'img /' + markerIcons [rndMarkerId] + '.png.webp', titre : 'Random Marker -' + markerId}); identifiant de marqueur ++; } 

8- Enfin nous ajoutons l'événement pour initialiser notre map et créons deux liens avant notre div avec les identifiants que nous définissons pour nos événements qui appelleront les fonctions correspondantes :

 google.maps.event.addDomListener (fenêtre, 'charger', initializeMap); Ajouter des signets
Ajouter un signet | Ajouter un signet personnalisé

Avec cela, nous avons déjà notre carte avec la fonctionnalité de pouvoir ajouter marqueurs standards Oui Douane Selon ce que l'on sélectionne, il est important de mentionner que l'on peut ajouter autant de favoris que l'on veut, cela nous permettra de voir le fonctionnement de l'API, pour finir voyons à quoi ça ressemble quand on l'exécute dans notre navigateur :

AGRANDIR

Dans toutes les applications que nous trouvons sur le Web qui affichent une carte, elles n'excluent pas la possibilité d'afficher des informations relatives au point vers lequel elles pointent, c'est pourquoi nous avons la possibilité d'ajouter une fenêtre contextuelle ou déroulante pour afficher des informations selon une certaine position sur notre carte ou même un marqueur, voyons comment nous pouvons faire cela :
1- Nous allons créer un nouveau fichier add_popup.html et on va se baser sur l'exemple précédent pour insérer les nouvelles fonctionnalités, pour cela on copie et on colle le code de notre map et on va localiser la fonction initializeMap () où après avoir obtenu l'ID, nous allons définir le popup pour le centre de notre carte avec la méthode InfoWindow, voyons le code de la fonctionnalité susmentionnée :

 var infowindow = new google.maps.InfoWindow ({contenu : 'Contenu contextuel :
Ce popup montre le centre de la carte qui est Madrid', position : nouveau google.maps.LatLng (40.41678, -3.70379)}); infowindow.open (carte); 

2- Nous allons maintenant modifier notre fonction ajouterMarqueur () pour ajouter une popup à chaque marqueur qui apparaît sur notre carte, pour cela nous utiliserons à nouveau la fonction Fenêtre d'informations () et nous allons ajouter un événement pour la variable que nous définissons avec l'instance de méthode, voyons :

 function addMarker () {var coordonnée = createLgRandom (); var marker = new google.maps.Marker ({position : coordonnée, carte : carte, titre : 'Marqueur aléatoire -' + markerId}); var infowindow = new google.maps.InfoWindow ({content: 'Marker Info Window - ID:' + markerId}); google.maps.event.addListener (marqueur, 'clic', fonction () {infowindow.open (carte, marqueur);}); identifiant de marqueur ++; } 

3- Une fois cela fait, voyons à quoi ressemble notre carte avec la fonctionnalité du popup que nous venons d'inclure :

AGRANDIR

4- Enfin, voyons la fonctionnalité similaire que nous appliquons à nos signets, nous le faisons en appuyant sur le lien Ajouter un marque-page:

AGRANDIR

Comme nous avons pu le voir, étendre les fonctionnalités de nos cartes et marqueurs est assez simple, il suffit d'utiliser les méthodes appropriées pour y parvenir.
Nous avons déjà testé la puissance des vecteurs en montrant les points d'intérêt sur une carte avec le MarqueursCependant, nous pouvons utiliser des vecteurs pour tracer des lignes et afficher l'itinéraire entre deux points sur notre carte, voyons comment nous procédons :
1- Nous allons créer un fichier appelé add_line.html et nous allons inclure notre API ainsi que les styles du premier exemple, maintenant nous allons définir les coordonnées qui vont de Madrid à Barcelone, Voyons voir:

 coordonnées var Ligne = [[40.41678, -3.70379], [41.4080,2.2293], [40.42697, -3.71379], [41.3974,2.2033], [40.40700, -3.71340], [41.3980,2.2133], [40.42772, -3.71379] , [41.3833, 2.1833]]; 

2- Avant de passer à la fonction d'initialisation de notre carte, nous allons d'abord créer la fonction ajouterLigne () où la première chose que nous allons faire est d'itérer sur le tableau de coordonnées et de créer un nouveau tableau qui contiendra un objet de type LatLng, Voyons voir:

 function addLine () {var pointCount = coordonneLigne.length; var cheminligne = []; for (var i = 0; i <pointCount; i ++) {var tempLatLng = new google.maps.LatLng (coordinateLine [i] [0], coordinateLine [i] [1]); linePath.push (tempLatLng); } 

3- Ensuite, nous définissons les propriétés de notre ligne, telles que la couleur, l'opacité et l'épaisseur. Après avoir fait cela, nous avons juste besoin d'envoyer à la méthode Polyligne les options en tant que paramètre et définissez la variable polyligne sur la carte actuelle :

 var lineOptions = {chemin : linePath, strokeWeight : 7, strokeColor : '# 313cac', strokeOpacity : 0.8} var polyline = new google.maps.Polyline (lineOptions); polyline.setMap (carte); } 

4- Enfin nous créons notre fonction bien connue initializeMap () et au lieu d'avoir une fonction appelée MarkerEvents à la fin, nous allons remplacer cette ligne par le nom de notre fonction ajouterLigne (), nous créons notre code HTML et l'exécutons dans notre navigateur, il devrait ressembler à ceci :

AGRANDIR

Dans l'exemple précédent nous ajoutons une ligne à notre carte et ainsi nous démontrons l'union de deux points pour démontrer l'itinéraire entre eux, cependant cet exemple, bien qu'illustratif, manque encore de quelque chose et c'est le fait de montrer la mobilité entre ces deux points , comme une voiture en mouvement.
Cela peut sembler assez compliqué mais ce n'est pas le cas, avec l'aide des classes et des méthodes du API Nous pouvons le résoudre avec quelques lignes de code, voyons comment nous procédons :
1- La première chose est d'inclure notre API, nos styles et nous définissons nos variables globales, nous utilisons les mêmes coordonnées de l'exemple précédent pour utiliser le même chemin, en plus nous définissons la variable polyligne comme global pour pouvoir l'utiliser dans toute la portée de notre Javascript:

 carte var; var polyligne; coordonnées var Ligne = [[40.41678, -3.70379], [41.4080,2.2293], [40.42697, -3.71379], [41.3974,2.2033], [40.40700, -3.71340], [41.3980,2.2133], [40.42772, -3.71379] , [41.3833, 2.1833]]; 

2- Maintenant, nous créons notre fonction ajouterLigneAnimée () qui aura une structure similaire à la fonction ajouterLigne () De l'exemple précédent, cependant, cette fonction aura la définition du symbole que nous utiliserons pour montrer l'objet en mouvement entre ces deux points, pour ce cas nous utiliserons une flèche :

 var arrowSymbol = {strokeColor : '# 000', échelle : 3, chemin : google.maps.SymbolPath.FORWARD_CLOSED_ARROW}; 

3- Enfin, nous n'avons qu'à définir cette variable sur l'option Icônes à partir de la définition de la ligne :

 var lineOptions = {path : linePath, icons : [{icon : arrow symbol}], strokeWeight : 3, strokeColor : '# 313cac', strokeOpacity : 0.8} 

4- Une fois cela fait, il ne nous reste plus qu'à animer notre icône et nous le faisons dans la fonction appelée animerFlèche () que nous devons inclure à la fin de la définition de la fonction ajouterLigneAnimée () Voyons ce que contient la fonction :

 function animerFlèche () {var compteur = 0; var accessVar = window.setInterval (function () {counter = (counter + 1)% 100; var arrows = polyline.get ('icons'); arrows [0] .offset = (counter / 2) + '%'; polyline.set ('icônes', flèches);}, 50); } 

5- Pour finir nous initialisons notre map comme nous le savons déjà et appelons notre fonction ajouterLigneAnimée ()Voyons lors de l'exécution à quoi cela ressemble dans notre navigateur, il est important de mentionner que la flèche a pour effet de se déplacer d'un point à un autre :

AGRANDIR

Avec ce dernier exemple, nous terminons ce tutoriel, car nous avons pu voir que l'utilisation de vecteurs dans nos cartes nous permet d'augmenter leur fonctionnalité et leur utilité, nous donnant la possibilité de mettre en œuvre des points d'intérêt jusqu'à des itinéraires alternatifs aux points que nous y plaçons .Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif