Javascript Girl
  1. Javascript Girl
  3. Angular google-maps non affiché
Intereting Posts
L'audio ne fonctionne pas avec phoneGap Comment faire pour que les éléments de formulaire se souviennent de la sélection? Obtenir des données de Spring MVC dans Angular JS dans l'appel de la vue initiale Pourquoi nsIScriptableInputStream ne fonctionne-t-il pas? Création de la fonction jQuery personnalisée sans prérequis du sélecteur Angularjs passant des variables dans le contrôleur Comment créer un commutateur marche / arrêt avec Javascript / CSS? Sur quelle base les fichiers javascript sont-ils mis en cache? JQuery Datatables: Impossible de lire la propriété 'aDataSort' de undefined Conversion de millisecondes en date (jQuery / JS) Permet de survoler lors de l'animation avec jQuery (sans souris mobile) Comment transmettre des littératures d'objets comme attributs de polymère Fancybox ne fonctionne pas avec des images de l'API Twitter TS2307: Impossible de trouver le module 'angular2 / core' lors de l'importation d'Angular2 sur TypeScript Désactiver les validateurs ASP.NET avec JavaScript

Angular google-maps non affiché

Je crée une application dans laquelle j'ai un module de covoiturage. Maintenant, je souhaite afficher une carte sur laquelle vous pourrez voir les covoitureurs proches de vous. Cependant, la carte ne s'affiche pas …

J'utilise une directive de

Http://nlaplante.github.io/angular-google-maps/

J'ai ajouté les google-maps à mes dépendances et la directive est remplacée par une carte google, mais elle ne montre rien.

J'ai cette directive à mon avis: 

<google-map center="center" zoom="zoom" markers="markers" style="height: 400px; width: 100%; display: block;"> </google-map>

J'ai toutes les variables dans mon contrôleur: 

  $scope.center = { latitude: 45, longitude: -73 }; $scope.markers = []; $scope.zoom = 8;

Lorsque j'ouvre Firebug, je reçois une erreur suivante: 

 Error: [$compile:multidir] Multiple directives [googleMap, markers] asking for new/isolated scope on: <google-map class="ng-isolate-scope ng-scope" center="center" zoom="zoom" markers="markers" style="height: 400px; width: 100%; display: block;">

J'ai essayé beaucoup de choses et cherché des solutions, mais aucun n'a résolu mon problème. Y a-t-il quelqu'un qui peut aider?

Merci d'avance. HS.

Je pense que vous avez deux problèmes:

  1. Marqueurs

    <google-map center="center" zoom="zoom" draggable="true"> <markers models="markers" coords="'geometry'"></markers> </google-map>

    Où «géométrie» est la propriété où vous avez obtenu les coordonnées. Si les marqueurs sont des coordonnées comme eux-mêmes, vous pouvez définir coords = "'self'"

  2. Style: Ne devez pas définir les styles de carte à la directive. Plutôt que cela, vous devez spécifier un style css

    .angular-google-map-container { height: 700px; }

Dans le message d'erreur, il existe [googleMap, markers] mentionnés.

La nouvelle version nécessite de créer un objet marqueur à l'intérieur de votre objet google-map et de supprimer la directive de google-map.

Exemple: 

 <google-map center="center" zoom="zoom" markers="markers" style="height: 400px; width: 100%; display: block;"> <markers> <marker ng-repeat="marker in markers" coords="marker"></marker> </markers> </google-map>

J'espère que ça aide.