Angular-google-maps: Wie ändere ich die Größe eines Symbols?

Erstellt am 18. Juli 2016  ·  19Kommentare  ·  Quelle: SebastianM/angular-google-maps

Fehlerbeschreibung
Ich möchte die Größe eines Symbols auf eine vordefinierte Größe ändern. Wie soll ich das machen?

Schritte zum Reproduzieren und eine minimale Demo des Problems
Aktuelles Verhalten
Keine Option für skalierte Größe vorhanden.

Erwartetes/gewünschtes Verhalten
Ich möchte die Größe eines Symbols ändern können.

angle2 & angle2-google-maps-version
neueste

Andere Informationen

AgmMarker stale feature-request

Hilfreichster Kommentar

Ich kann das Icon- Objekt gegen die iconUrl-Eigenschaft des Markers verwenden.

Mein Symbol sieht so aus:

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

Und dann binde ich das an [iconUrl] . Die Variable 'iconUrl' hat vielleicht einen schlechten Namen, aber wenn Sie sich die Quelle ansehen, wird sie einfach an die 'icon'-Eigenschaft für gmaps übergeben.

Alle 19 Kommentare

Ich versuche dasselbe zu tun, aber wenn ich mir die Quellen anschaue, gibt es keine Möglichkeit, ein Symbol zuzuweisen, ist über eine URL, Sie können das google.maps.Icon-Objekt nicht verwenden. Ich dachte daran, den Code zu ändern und eine Pull-Anfrage dafür zu erstellen.

@SebastianM Ich habe Code geschrieben, um google.maps.Symbol und google.maps.Icon für die icon-Eigenschaft des Markers zu verarbeiten. Ich werde morgen zu meiner Gabel schieben, damit Sie sich das ansehen können

Ich stimme zu, dass wir sowohl String- als auch Icon-Objekte unterstützen und die Eigenschaft in icon umbenennen sollten
icon?: string|Icon;

Ich habe 4 Unit-Tests gebrochen, aber ich habe das Icon-Update in meinem Fork. Ich habe auch die Datei google-maps-types.ts hinzugefügt.

@cdarken Ich habe gerade deinen PR gesehen und werde mich mit meinem PR zurückhalten, es ist im Grunde dasselbe. Ich habe einige Vorschläge zu den Eigenschaftsnamen. Ich denke, wir sollten der Benennung entsprechen, die Google verwendet.

@rc3media Ich habe versucht, es abwärtskompatibel zu halten, deshalb habe ich dem Marker den Accessor 'icon' hinzugefügt

Wann wird diese Funktion hinzugefügt? Dieses Problem ist vom August X_X

Ich kann das Icon- Objekt gegen die iconUrl-Eigenschaft des Markers verwenden.

Mein Symbol sieht so aus:

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

Und dann binde ich das an [iconUrl] . Die Variable 'iconUrl' hat vielleicht einen schlechten Namen, aber wenn Sie sich die Quelle ansehen, wird sie einfach an die 'icon'-Eigenschaft für gmaps übergeben.

@bradseefeld wo platzieren Sie den Code, der das Symbol definiert: in Ihrer Typoskript-Komponente? Ich habe einen Fehler Der Name 'require' kann nicht gefunden werden .

Wir verwenden Webpack, um unsere App zu verarbeiten und zu verpacken. Es verarbeitet die erforderlichen Anrufe. Ich glaube nicht, dass diese Lösung funktioniert, es sei denn, Sie verwenden Webpack oder etwas Ähnliches.

Ja, ich benutze Webpack. Es funktioniert, aber ich musste hinzufügen:
declare function require(path: string);

Erfordern ist nicht notwendig (zumindest bei Ionic)

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

@sebrojas14 das funktioniert in den neuesten 1.0.0.x-Versionen nicht mehr.
Jetzt ist wirklich "String" erforderlich, wenn nicht vorgesehen, wird ein Fehler ausgegeben.

Haben Sie eine Idee, wann diese stark nachgefragte Funktion verfügbar sein wird?

Danke

@pdanysz funktioniert bei mir einwandfrei, Version 1.0.0-beta.3

@grreeenn Ich habe diese Version bereits installiert und es wird ein Fehler ausgegeben, so frage ich :)

Kannst du deinen Code teilen, ... vielleicht mache ich etwas falsch :)

Danke

@pdanysz Wir haben unsere Zauberstäbe verloren und können Ihren Fehler von hier aus nicht sehen. Es wäre wirklich hilfreich, wenn Sie den Fehler mitteilen könnten, damit wir wissen, womit Sie es tatsächlich zu tun haben. Außerdem benötigen wir Ihren Code, um den Fehler zu beheben. Mit anderen Worten, um Ihnen helfen zu können, benötigen wir eine vollständige Reproduktion, damit wir das Problem untersuchen können. Könnten Sie uns das geben?

Ich habe versucht, dieses Objekt zu verwenden:

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

und das funktioniert bei mir.
Die Markierung soll jedoch für mehrere Einrichtungen auf meiner Karte verwendet werden, und ich kann keine einzelne Eigenschaft in meiner ts-Klasse verwenden, damit dies wie beabsichtigt funktioniert. Anstatt [iconUrl]="icon" in meinem HTML-Code zu verwenden, versuche ich, [iconUrl]="getIcon(establishment)" zu verwenden, was das oben beschriebene Objekt mit unterschiedlichen URLs für jede Einrichtung zurückgeben würde. Dadurch friert die App ein, wenn versucht wird, die agm-map zu laden. Ist das Zeug, das ich hier geschrieben habe, genug, um zu sagen, ob dies möglich ist? Bei Bedarf kann ich weitere Details senden.
Danke!

Gefunden diesem Kommentar von hrdkisback auf Stackoverflow , die Sie dynamisch die Markierung auf der Karte Symbol ändern kann , und geben Sie die Größe:

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

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

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivität hatte. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

Subhojit1992 picture Subhojit1992  ·  3Kommentare

shedar picture shedar  ·  4Kommentare

maneesht picture maneesht  ·  3Kommentare

supran2811 picture supran2811  ·  4Kommentare

ostapch picture ostapch  ·  4Kommentare