À l'aide de ng-repeat avec des marqueurs dans ngMap
Je veux utiliser ngMap pour ajouter Google Maps pour mon application.
Les démos sont "statiques", dans le sens qu'ils n'ont qu'codé en dur en HTML. Je veux mon code pour être "dynamique" dans le sens qu'il demandera périodiquement un serveur à rechercher dans sa base de données et m'a fait un tas de coordonnées de la parcelle, ce qui va changer avec le temps. J'espère que c'est clair; si non, veuillez demander pour plus de détails.
J'ai modifié le ngmap marqueurs de démonstration pour générer du hasard les coordonnées lat/long toutes les deux secondes (plutôt que d'aller à mon serveur, comme ma dernière app). Veuillez voir le Plunk.
Il n'y a pas d'erreurs dans la console, et il semble que ngMap est d'essayer d'ajouter mes marqueurs, comme je vois beaucoup de ce genre de chose dans la console ...
adding marker with options,
Object {ngRepeat: "myMarker in markers", position: O}
clickable: true
ngRepeat: "myMarker in markers"
position: O
A: 103.96749299999999
k: 1.387454
__proto__: O
visible: true
__proto__: Object
où K et A sont les Lat/Long comme je les attends.
MAIS ... je ne vois pas de marqueurs sur la carte. Ce que je fais mal?
[Mise à jour] Une excellente réponse, pour lequel je volontiers remis une prime par la suite. Pour quelqu'un d'autre de le lire et qui souhaitent utiliser ngMap @allenhwkim dit dans un autre stackoverflow question et, je crois, sur son blog, ngMap crée juste la carte pour vous & après cela, vous le manipuler avec le standard de l'API Google Maps.
Par exemple, juste avant de faire la boucle pour ajouter des marqueurs, j'ai déclaré
var bounds = new google.maps.LatLngBounds();
et dans la boucle, après l'ajout du marqueur sur la carte, j'ai bounds.extend(latlng);
et, enfin, après la boucle, je
var centre = bounds.getCenter();
$scope.map.setCenter(centre);
Je bifurquais la réponse et créé une nouvelle Plunk de le montrer. Pas la monde le plus utile de la fonctionnalité, mais le point est juste pour montrer comment l'utiliser $scope.map
avec l'API Google Maps. Merci encore, Allen, pour ngMap.
OriginalL'auteur Mawg | 2014-03-13
Vous devez vous connecter pour publier un commentaire.
Réponse est ici
http://plnkr.co/edit/Widr0o?p=preview
Rappelez-vous que ngMap n'est pas de remplacer Google Maps API V3.
Laissez-moi savoir si vous avez d'autres questions.
Ce qui suit est le code de bloc du contrôleur.
merci pour vos points supplémentaires(Vous ne devriez pas avoir). Comme vous l'avez dit, j'ai ajouté de la dynamique des marqueurs comme un exemple de fichier, et j'espère que c'est utile pour de nombreuses personnes.
Ah, oui, rawgithub.com/allenhwkim/angularjs-google-maps/master/examples/... j'ai aussi fourchue votre Débarquez à montrer comment utiliser l'API Google Maps après ngMap crée la carte. J'avais essayé quelques solutions pour Angulr Google Maps, mais ne pouvait pas faire le travail. Ensuite, j'ai trouvé ngMap et c'est tout ce que je pouvais souhaiter. Merci!
votre plunker ne fonctionne pas, il ne trouve pas le module ngMap
plunker mis à jour.
OriginalL'auteur allenhwkim
Pourquoi ne pas faire quelque chose comme
Si vous demander ng-repeat qui serait à l'œuvre. Et vous remplir les destinations avec un simple http appel à votre backend:
En êtes-vous des erreurs? Fait-on montrer? Démonter le code et de voir quand il cesse de travailler, sinon, je peux pas vraiment aider beaucoup 🙂
Pas de soucis, @allenhwkim réponse a fonctionné pour moi. C'est plus propre, donc j'ai donné un coup de feu.
Cette solution permettra également de travail. La différence, c'est la performance. Lorsque nous utilisons ng-repeat, il va également mettre à jour les DOM, et parfois la mise à jour de DOM n'est pas nécessaire et la mise à jour du DOM est assez cher.
OriginalL'auteur Vladimir