Javascript Girl
  1. Javascript Girl
  3. Google maps avec angulaire
Intereting Posts
Javascript php obtient la valeur d'une zone de texte ajouté dynamiquement Comment faire des événements personnalisés en direct dans jQuery Toile même Img Eating RAM et CPU JQuery charge le contenu du lien avec Ajax Javascript UK Postcode Validation Messages de validation dans la directive – AngularJS Firefox ne soumettra pas un formulaire créé par JavaScript Erreur de console lors de l'utilisation de jquery – Uncaught TypeError: Object # <HTMLElement> n'a pas de méthode Que signifie le code suivant en javascript? Problèmes setTimeout / clearTimeout Meilleure façon d'injecter html en utilisant javascript Compte à rebours Javascript avec Twitter Bootstrap Progress Bar Javascript – Affectez dynamiquement l'événement onclick dans la boucle Google maps API v3 Comment puis-je supprimer la flèche sous le rectangle infowindow? JQuery supprime les caractères spéciaux de la chaîne et plus

Google maps avec angulaire

Je veux faire un projet où j'ai besoin d'intégrer google maps api. J'ai besoin d'une autocomplète, d'une localisation et d'un itinéraire sur la carte. Comment puis-je faire cela avec angular, pouvez-vous me recommander une bibliothèque pour cela? Ou comment puis-je faire cela avec google maps api pour javascript. Ce projet est généré en utilisant yeoman-fullstack.

Merci.

Tout d'abord, si vous souhaitez que l' API Google Maps soit en cours avec AngularJS, vous avez deux solutions:

  • Utilisation des API Google Maps de Scratch
  • Utilisation de Angular-Google Maps

Je vais vous montrer comment le rendre facile à partir de rien.

Il s'agit d'un exemple d'une application AngularJS simple, destinée uniquement à apprendre à utiliser de telles API. J'ai fait ce petit exercice AngularJS pour l'utiliser dans de grandes applications.

Index.html: 

<html ng-app="myApp"> <!--Your App--> <head> <title>AngularJS-Google-Maps</title> <link rel="stylesheet" href="style.css"> <script src="../lib/angular.min.js"></script> <script src="app.js"></script> <!-- You have to look for a Maps Key, you can find it on Google Map Api's website if you pay a bit of attention--> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key= YourKey&sensor=false"> </script> </head> <body> <!--Custom directive my-maps, we will get our map in here--> <my-maps id="map-canvas"></my-maps> </body> </html>

App.js: 

 var myApp = angular.module("myApp",[]); //Getting our Maps Element Directive myApp.directive("myMaps", function(){ return{ restrict:'E', //Element Type template:'<div></div>', //Defining myApp div replace:true, //Allowing replacing link: function(scope, element, attributes){ //Initializing Coordinates var myLatLng = new google.maps.LatLng(YourLat,YourLong); var mapOptions = { center: myLatLng, //Center of our map based on LatLong Coordinates zoom: 5, //How much we want to initialize our zoom in the map //Map type, you can check them in APIs documentation mapTypeId: google.maps.MapTypeId.ROADMAP }; //Attaching our features & options to the map var map = new google.maps.Map(document.getElementById(attributes.id), mapOptions); //Putting a marker on the center var marker = new google.maps.Marker({ position: myLatLng, map: map, title:"My town" }); marker.setMap(map); //Setting the marker up } }; });

Style.css: 

 //Just giving our container Height and Width + A Red border #map-canvas{ height: 400px; width: 700px; border: 2px solid red; }

C'est juste une façon vraiment simple de commencer, je n'ai même pas utilisé un contrôleur, même si vous devriez vraiment les utiliser dans AngularJS.

C'est un Plunk actif que j'ai mis en place avec ce code.

Vous pouvez jouer avec les API de Google Maps de différentes façons, consultez la documentation ou ici sur StackOverflow.

Maintenant, si vous souhaitez gérer les itinéraires entre 2 emplacements, marqueurs, etc., vous devriez regarder:

  • Documentation de l'API Google Maps
  • Cette réponse par @geocodezip
  • Cette réponse de @Gurpreet Singh
  • Cette réponse de @ zeeshan0026

Et, à la fin, vous pouvez vérifier ce travail JSFiddle réalisé par @Shreerang Patwardhan en utilisant Polylines (Vos itinéraires recherchés depuis longtemps).

Pour les implémentations futures, assurez-vous de mettre votre directive myMaps.js dans un fichier séparé et d' Injecter une dépendance dans votre module d'application. Pour obtenir des applications DRY (Ne pas vous répéter) et Maintenable, en utilisant la même directive de travail que le point de démarrage pour Votre application angulaire impliquant Google Maps. Par exemple, vous pourrez simplement modifier vos coordonnées ou ajouter une nouvelle option de la carte pour démarrer les applications futures qui nécessitent Google Maps.

Vous devriez obtenir quelque chose comme: 

 myApp.directive("myMap", function(){ . . . }); //Goes in a Separated File var myApp = angular.module("myApp",['myMaps']); //Dependency Injection

J'espère avoir été utile.

Vous pouvez utiliser Angular google maps. Angular Google Maps est un ensemble de directives (partie de angular-ui) écrites dans CoffeeScript et Javascript qui intègrent Google Maps dans une application AngularJS. Bien sûr, il existe de nombreuses autres directives à cette fin.

https://angular-ui.github.io/angular-google-maps/