Angular-google-maps: Comment redimensionner une icône ?

Créé le 18 juil. 2016  ·  19Commentaires  ·  Source: SebastianM/angular-google-maps

Description du problème
Je voudrais redimensionner une icône à une taille prédéfinie. Comment dois-je faire cela?

Étapes à reproduire et une démo minimale du problème
Comportement actuel
Aucune option pour la taille à l'échelle présente.

Comportement attendu/souhaité
Je veux pouvoir redimensionner une icône.

version angular2 et angular2-google-maps
dernier

Les autres informations

AgmMarker stale feature-request

Commentaire le plus utile

Je peux utiliser l'objet Icon contre la propriété iconUrl du marqueur.

Mon icône ressemble à :

{
      url: require('../images/vehicle-active.png'), // gives a data://<value>
      scaledSize: {
        height: 40,
        width: 40
      }
}

Et puis je le lie à [iconUrl] . La variable 'iconUrl' peut être mal nommée, mais si vous regardez la source, elle est simplement transmise à la propriété 'icon' pour gmaps.

Tous les 19 commentaires

J'essaie de faire la même chose, mais en regardant les sources, il n'y a aucun moyen de le faire, la seule façon d'attribuer une icône est via une URL, vous ne pouvez pas utiliser l'objet google.maps.Icon. Je pensais modifier le code et créer une pull request pour celui-ci.

@SebastianM J'ai écrit du code pour gérer google.maps.Symbol et google.maps.Icon pour la propriété icon du marqueur, je vais pousser mon fork demain pour que vous puissiez y jeter un œil

Je suis d'accord que nous devrions prendre en charge les objets chaîne et icône et renommer la propriété en icône
icon?: string|Icon;

J'ai cassé 4 tests unitaires, mais j'ai la mise à jour de l'icône dans mon fork. J'ai également ajouté au fichier google-maps-types.ts.

@cdarken Je viens de voir votre PR et je vais

@rc3media J'ai essayé de le garder rétrocompatible, c'est pourquoi j'ai ajouté l'accesseur 'icon' sur le marqueur

Quand cette fonctionnalité sera-t-elle ajoutée ? ce problème date du X_X août

Je peux utiliser l'objet Icon contre la propriété iconUrl du marqueur.

Mon icône ressemble à :

{
      url: require('../images/vehicle-active.png'), // gives a data://<value>
      scaledSize: {
        height: 40,
        width: 40
      }
}

Et puis je le lie à [iconUrl] . La variable 'iconUrl' peut être mal nommée, mais si vous regardez la source, elle est simplement transmise à la propriété 'icon' pour gmaps.

@bradseefeldImpossible de trouver le nom 'require' .

Nous utilisons webpack pour traiter et emballer notre application. Il gère les appels requis. Je ne pense pas que cette solution fonctionnera à moins que vous n'utilisiez webpack ou quelque chose de similaire.

Oui, j'utilise webpack. Cela fonctionne, mais je devais ajouter :
declare function require(path: string);

Require n'est pas nécessaire (au moins avec Ionic)

{
      url: 'assets/img/marker-me.png',
      scaledSize: {
        height: 40,
        width: 40
      }
}

@sebrojas14 cela ne fonctionne plus dans les dernières versions 1.0.0.x.
Maintenant, il faut vraiment "String", s'il n'est pas fourni, il génère une erreur.

Avez-vous des idées de quand cette fonctionnalité très demandée sera disponible ?

Merci

@pdanysz fonctionne bien pour moi, version 1.0.0-beta.3

@grreeenn J'ai déjà installé cette version et cela me renvoie une erreur, c'est comme ça que je demande :)

Pouvez-vous partager votre code, ... peut-être que je fais quelque chose de mal :)

Merci

@pdanysz Nous avons perdu nos baguettes magiques et nous ne pouvons pas voir votre erreur d'ici. Cela aiderait vraiment si vous pouviez partager l'erreur afin que nous sachions à quoi vous avez réellement affaire. Nous aurons également besoin de votre code pour savoir comment corriger l'erreur. En d'autres termes, afin de vous aider, nous avons besoin d'une reproduction complète afin que nous puissions inspecter le problème. Pourriez-vous nous donner cela ?

J'ai essayé d'utiliser cet objet :

icon = {
        url: '/assets/images/img.png', 
        scaledSize: {
          height: 40,
          width: 20
        }
      };

et ça marche pour moi.
Cependant, le marqueur est censé être utilisé pour plusieurs établissements sur ma carte, et je ne peux pas utiliser une seule propriété sur ma classe ts pour que cela fonctionne comme prévu. Ainsi, au lieu d'utiliser [iconUrl]="icon" sur mon html, j'essaie d'utiliser [iconUrl]="getIcon(establishment)", qui renverrait l'objet décrit ci-dessus avec des URL différentes pour chaque établissement. Cela fait geler l'application lorsque vous essayez de charger la carte agm. Est-ce que ce que j'ai écrit ici est suffisant pour dire si c'est possible ? Je peux envoyer plus de détails si besoin.
Merci!

Trouvé ce commentaire de hrdkisback sur StackOverflow qui vous permet de modifier dynamiquement l'icône du marqueur de carte et de spécifier la taille :

[iconUrl]='{"url": marker,"scaledSize": {"height": 10, "width": 10}}'

https://stackoverflow.com/questions/50812678/add-user-image-to-agm-marker-in-angular-5#comment88677807_50812678

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité ne se produit. Merci pour vos contributions.

Cette page vous a été utile?
0 / 5 - 0 notes