Angular-google-maps: Markierungsetiketten

Erstellt am 11. Mai 2016  ·  27Kommentare  ·  Quelle: SebastianM/angular-google-maps

Gibt es eine Möglichkeit, Markierungen wie diesen Beschriftungen hinzuzufügen?

image

stale discussion / question feature-request

Hilfreichster Kommentar

Hier ist eine Problemumgehung. Aus der Google Maps API-Dokumentation geht hervor, dass die Bezeichnung entweder eine Zeichenfolge oder eine MarkerLabel-Objektspezifikation sein kann. Geben Sie daher anstelle der Verwendung einer Zeichenfolge für die Bezeichnung das MarkerLabel-Objekt an und geben Sie es als Variable ein, z
`let markerLabelObject = {
Farbe Rot",
fontFamily: "monospace",
fontSize: "13",
fontWeight: "100",
text: element.names

     }

    this.markers.push({
      lat: element.latitude,
      label:markerLabelObject,
      lng: element.longitude,`

Alle 27 Kommentare

@ssypi Ich denke, es ist

Ich recherchiere auch dies und ändere außerdem das Pin-Symbol !!!

@SebastianM Ich hatte noch nicht genug Zeit, um mich (Quellen und Dokumente / Beispiele) oder dieser Gabelung zu verwenden . Auf den ersten Blick scheint es ziemlich einfach zu bedienen zu sein, obwohl es einen Verweis auf die Karte benötigt.

@ brian-Singer Das Pin-Symbol kann geändert werden, indem die Eigenschaft iconUrl in der Marker-Direktive https://angular-maps.com/docs/api/latest/ts/core/SebmGoogleMapMarker-directive.html festgelegt wird

Richtig, iconUrl hat es geschafft. @alexweber danke

InfoWindow kann nicht gestaltet werden. Wenn Sie ein benutzerdefiniertes Infofenster benötigen, sollte das Infobox-Plugin von Google Maps verwendet werden.
https://github.com/googlemaps/v3-utility-library/blob/master/infobox/src/infobox.js

Implementierung in meinem Projekt:

screen shot 2016-07-08 at 18 40 56

Um Marker zu formatieren und benutzerdefinierte Beschriftungen hinzuzufügen, sollte auch die Google Maps-Bibliothek "markerwithlabel" verwendet werden.
https://github.com/googlemaps/v3-utility-library/blob/master/markerwithlabel/src/markerwithlabel.js

screen shot 2016-07-08 at 18 40 10

Habe dies auf Angular1 und nativen Google Maps implementiert, aber ich weiß nicht, wie ich dieselbe Logik mit Angular2 und diesem Plugin implementieren soll. Oder sollte ich googlemaps api direkt wie in angle1 verwenden?

@ ddctd143 Sie können dies wahrscheinlich mit einer benutzerdefinierten Komponente / Direktive erreichen, die in der Karte oder Markierungskomponente platziert ist, wie hier erwähnt: https://github.com/SebastianM/angular2-google-maps/issues/307#issuecomment -229084829

Ich habe die obige Lösung in einen Plunkr für die gestaltete Karte integriert:

https://plnkr.co/edit/rv6udUOEedMxJejEpIW1

Aber ich muss noch herausfinden, ob ich dasselbe für den Marker tun soll, da ich auch das Etikett damit brauche. Wenn ich die Styled-Marker-Direktive verwende, weiß ich nicht, ob ich die Marker-Instanz erhalten kann.

@alexjeen Kannst du dein Problem auf stackoverflow posten? Vor einigen Monaten habe ich meinen Code neu geschrieben, um mit dieser Bibliothek und Google Maps zu arbeiten. Ich würde Ihre Frage beantworten.

Ich versuche, MarkerWithLabel nach der Antwort @ ddctd143 im Stackoverflow zu implementieren, erhalte jedoch einen nicht definierten Google-Fehler auf markerwithlabel.js. Weiß jemand, wie man das behebt?

@bibr Du solltest es als importieren

@bibr warst du jemals in der Lage, dies zum

@ Ryan-Morris Ja, ich muss die Karte vor marker.js laden, also habe ich dies in index.html hinzugefügt

window.onload = function() {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'assets/js/marker.js';
        var x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
    }

@bibr @ ddctd143 Fehler erhalten Zone: eckig; Wert: ReferenceError: MarkerWithLabel ist nicht definiert, wenn ich neues MarkerWithLabel verwende. Irgendwelche Ideen, wie ich das lösen kann?
`import {Directive, OnInit} from '@ angle / core';
{GoogleMapsAPIWrapper} aus 'angle2-google-maps / core' importieren;
import "../scripts/markerwithlabel.js";

deklariere const Marker WithLabel: any;

@Directive ({
Selektor: 'markerlabel-Direktive'
})

Exportklasse MarkerLabelDirective implementiert OnInit {

private map: any;
constructor(private gmapsApi: GoogleMapsAPIWrapper) {}
ngOnInit() {
this.gmapsApi.getNativeMap().then(map => {
  // instance of the map.
  this.map = map;
  this.initMap();
});

}}

initMap () {
var latLng = new google.maps.LatLng (49.47805, -123.84716);
var homeLatLng = new google.maps.LatLng (49.47805, -123.84716);

 var marker1 = new MarkerWithLabel({
   position: homeLatLng,
   draggable: true,
   raiseOnDrag: true,
   map: this.map,
   labelContent: "$425K",
   labelAnchor: new google.maps.Point(22, 0),
   labelStyle: {opacity: 0.75}
 });

 var marker2 = new MarkerWithLabel({
   position: new google.maps.LatLng(49.475, -123.84),
   draggable: true,
   raiseOnDrag: true,
   map: this.map,
   labelContent: "$395K",
   labelAnchor: new google.maps.Point(22, 0),
   labelStyle: {opacity: 1.0}
 });

 var iw1 = new google.maps.InfoWindow({
   content: "Home For Sale"
 });
 var iw2 = new google.maps.InfoWindow({
   content: "Another Home For Sale"
 });
 google.maps.event.addListener(marker1, "click", function (e) { iw1.open(this.map, this); });
 google.maps.event.addListener(marker2, "click", function (e) { iw2.open(this.map, this); });

}}
} `

irgendwelche Updates?

Hier ist eine Problemumgehung. Aus der Google Maps API-Dokumentation geht hervor, dass die Bezeichnung entweder eine Zeichenfolge oder eine MarkerLabel-Objektspezifikation sein kann. Geben Sie daher anstelle der Verwendung einer Zeichenfolge für die Bezeichnung das MarkerLabel-Objekt an und geben Sie es als Variable ein, z
`let markerLabelObject = {
Farbe Rot",
fontFamily: "monospace",
fontSize: "13",
fontWeight: "100",
text: element.names

     }

    this.markers.push({
      lat: element.latitude,
      label:markerLabelObject,
      lng: element.longitude,`

Ja bitte. MarkerWithLabel scheint der richtige Weg zu sein.
https://stackoverflow.com/questions/32467212/google-maps-marker-label-with-multiple-characters

@nelsonBlack Erhöht sich die Größe des Markers für Sie? Es ist nicht für mich, also nicht sehr hilfreich.

@Ammueliza hast du es zum

Pull-Anfrage mit dieser Funktionalität hinzugefügt

1392

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

Ich habe versucht, dies jetzt zu implementieren und bin gescheitert. Entweder habe ich etwas falsch gemacht oder dies ist nicht Teil der neuesten Version (1.0.0-beta.5)?
FEHLER in: Kann nicht an 'markerWithLabel' gebunden werden, da es keine bekannte Eigenschaft von 'agm-marker' ist.
Soweit ich den Code in der PR verstehe, muss ich ihn auf "true" setzen.

Ich habe versucht mit:
Angular 7 (von der neuesten Version noch nicht offiziell unterstützt)
@ agm / [email protected]
[email protected]

Kann mir bitte jemand sagen, wie ich das zum Laufen bringen kann?

@pueaau Ich habe versucht, dies zum https://www.npmjs.com/package/@ajqua/marker -with-label

Erstellt ein neues Repo mit den richtigen Pfaden
https://github.com/braxtondiggs/marker-with-label

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

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen