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.
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
Danke für Ihre Hilfe
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.
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.
Tags und Links javascript google-maps google-maps-markers google-maps-api-3 marker