Ich habe bereits Maps API in mein Projekt aufgenommen. Jetzt möchte ich einige Markierungen auf meiner Karte zeigen. Ich initialisiere meine Karte in einer Startfunktion:
%Vor%Dann stelle ich das Zentrum der Karte beim Rendern ein
%Vor%Bis jetzt funktioniert alles gut. Trotz ich habe eine PostCollection, die einige Koordinaten für mich enthält. Ich habe eine Veröffentlichung und Subskription. Jetzt möchte ich meine Beiträge über Marker auf der Karte zeigen.
Meine erste Idee war, dies in meiner gerenderten Funktion zu tun. Das Problem ist, dass beim ersten Laden keine Posts angezeigt werden, da meine localcollection (clientside) keine Posts enthält. Es dauert eine Weile, bis die Posts vom Server geladen sind.
Das ist der Grund, warum ich versucht habe, eine Hilfsfunktion aufzubauen. Weil der Helfer automatisch reoads, wenn sich etwas in meinen Posts ändert.
%Vor%Das Problem ist jetzt, dass meine Map-Variable nicht definiert ist. Gibt es eine Möglichkeit, es global zu definieren? Warum kann ich meine Map-Variable in meiner gerenderten Funktion verwenden? Trotzdem mag ich meinen Ansatz nicht, meine Marker mit der Hilfsfunktion zu injizieren oder ist es der übliche Weg?
Kann mir jemand einen Hinweis geben, wie ich mein Problem lösen kann?
Wie in meinem Fragetext geschrieben, brauchte ich Hilfe um Google Maps zu integrieren. Die Frage wurde bis jetzt nicht beantwortet und ich möchte, dass Sie eine kurze Einführung geben, wie Sie dieses Problem lösen können.
Wie kann man Karten in meteor.js / meteorite.js integrieren?
Zuerst müssen Sie das Kartenskript in Ihren head-tag einfügen
%Vor%Dann sollten Sie eine Karten-Vorlage erstellen:
%Vor%In der zugehörigen js-Datei sollten Sie eine gerenderte Funktion definieren. Wenn die gerenderte Funktion aufgerufen wird, erstellen Sie eine Karte und zeigen eine Markierung auf der Karte an. (Vergessen Sie nicht, Ihnen eine Karte zu geben)
%Vor%Jetzt wird das maps-Objekt immer neu erstellt, wenn die Vorlage gerendert wird. Dies ist keine Best Practice, aber es funktioniert. Ich habe versucht, die Erstellung in Template.mapPostsList.created-callback zu setzen, aber es löst immer einen Offset-width-Fehler aus. Dann setze ich eine Markierung mit meiner Position auf die Karte und definiere eine Sitzung, in der meine Karte initialisiert wird.
Nun. Aber jetzt wird meine Sitzung beim ersten Rendering initialisiert, deshalb setze ich sie auf false, wenn meine Vorlage zerstört wird.
%Vor%Wenn Sie Ihre Posts in die Map holen wollen, müssen Sie eine Autorun-Funktion definieren.
%Vor%Die Funktion Deps.autorun wird immer ausgelöst, wenn sich der Inhalt ändert. Das heißt, wenn ich meine Session-bezogene Map-Variable ändere, wird das Autorun aufgerufen. Wenn ich es auf false setze, tue ich nichts. Sonst hole ich alle meine Posts in die forEach-Karte. Da ich die Karte beim Rendern neu erstellt habe, muss ich nicht überprüfen, welche Beiträge bereits auf der Karte markiert sind, wenn sich meine Sammlung ändert.
Diese Lösung funktioniert ganz gut für mich.
Ich hoffe, ich kann jemanden dabei helfen!
Was für mich funktionierte, war folgendes:
Hier ist der Code
map.html
%Vor%map.js
%Vor%Hoffe es hilft