JS Maps v3: benutzerdefinierte Markierung mit Benutzerprofilbild

8

Ich habe seit 2 Tagen mit etwas zu kämpfen, das ich einfach dachte, auf einer Karte muss ich eine Markierung für jeden Benutzer mit dem Benutzer FB Profilbild innerhalb anzeigen.

Ich frage mich, wie ich ein ähnliches Ergebnis erzielen kann? Was ich versuchte, war wirklich hackisch.

  • Ich habe das FB-Bild als Markersymbol
  • verwendet
  • Ich habe eine CSS-Klasse auf das Etikett des Markers
  • gesetzt
  • Ich finde die Geschwister, die diesen Rahmen und diesen Pfeil hinzufügen, um das Benutzerbild zu dekorieren

aber es funktioniert nicht, wenn mehr als ein Marker auf der Karte ist.

%Vor%

globale Frage:

  • wie bekomme ich ein Icon wie das ( Ссылка zum Beispiel) mit einem benutzerdefinierten Benutzerbild innen? ist es möglich?

  • sonst ist es möglich, das Symbol (wenn es das Profilbild ist) anzupassen, um ein Ergebnis ähnlich dem Screenshot

  • zu haben

Danke für Ihre Hilfe

    
dbaq 31.05.2014, 00:20
quelle

1 Antwort

14

Diese Antwort geht davon aus, dass Sie bereits die URIs für die Facebook-Profilbilder haben. Ehrlich gesagt, es fühlt sich einfacher an, aber ich fand irgendeinen Code , die zeigt, wie man einen benutzerdefinierten Marker mit benutzerdefinierten HTML-Elementen erstellt und ich ging von dort. Von dort aus ist es ziemlich einfach, einen benutzerdefinierten Marker zu erstellen, der einen Bild-URI als Parameter akzeptiert. Vom Original habe ich gerade einen imageSrc -Parameter hinzugefügt, den Stil außerhalb des Codes verschoben, indem ich einen Klassennamen an das neue div angehängt habe. In Bezug auf html und css habe ich einfach ein Bild mit dem übergebenen Bild-URI an das div angehängt und einfach etwas CSS hinzugefügt, damit es so aussieht wie das, was Sie haben.

Demo

So sieht der JavaScript-Code etwa so aus:

%Vor%

Ich denke, ich habe hier nur ein oder zwei Zeilen hinzugefügt. Sie können dies einfach zu Ihrer Seite hinzufügen, denke ich. Damit können Sie den Container einfach normal formatieren und auf alle benutzerdefinierten Markierungen anwenden. Sie können nach Bedarf Elemente und Klassen hinzufügen, um das von Ihnen gewünschte Aussehen zu erreichen. Aber um der Vollständigkeit willen habe ich die Stile, die ich für die Demo verwendet habe, hier hinzugefügt.

%Vor%

Und für die Demo habe ich einige Beispieldaten im Array und platziere sie mit einer for-Schleife auf der Karte.

%Vor%

Ich hoffe, das hilft.

    
mfirdaus 03.06.2014, 07:43
quelle