Verwenden Sie eine Google Maps-Straßenansicht innerhalb eines Modals erneut
Ich entwickle eine Web-App in Rails. Wenn ich einen Marker öffne, erscheint ein Modal mit einer Straßenansicht in einer Box. Ich kann ein oder zwei Marker öffnen, aber danach bekomme ich einen Fehler, dass WebGL einen Haken gefunden hat. Ich habe versucht, online nach Ressourcen zu suchen, aber nichts macht Sinn. Siehe unten Bilder für weitere Informationen. Jede Hilfe würde sehr geschätzt werden.
Hier ist ein Bild davon, wie mein Konsolenprotokoll aussieht:
Hier ist mein JavaScript-Code in meiner Webapp.
%Vor%Dies war der ursprüngliche Code, um das Modal mit den benötigten Informationen aufzurufen.
%Vor%Um die Straßenansicht innerhalb des Modales hinzuzufügen, wurde der folgende Code hinzugefügt:
%Vor%Um den aktuellen Breitengrad und die Länge in die Straßenansicht zu übertragen, musste ich ihn in dieselbe Funktion einfügen, in der das Modal aufgerufen wird.
AKTUALISIEREN
Ich kann nicht herausfinden, wie var sv = new google.maps.StreetViewPanorama(div); gesetzt wird, damit es einmal gesetzt wird und dieselbe Map für jede Instanz des aufgerufenen Modals wiederverwendet wird, anstatt zu versuchen, eine neue Instanz zu starten und neu zu starten.
Update 2
Ich kann nicht herausfinden, wie ich diesen Teil initialisieren soll:
%Vor%Wenn ich also ein Modal öffne, wird keine neue Map gerendert, sondern es wird dieselbe Map verwendet. Ich bin geneigt, eine andere Funktion zu schreiben, aber ich brauche bitte eine Anleitung.
UPDATE 3
Etwas anderes, das mir aufgefallen ist, ist, dass wenn ich auf einen Marker klicke, er die Straßenansicht zeigt, die sein Quadrat im Modal ausfüllt. Wenn ich auf ein anderes klicke, wird es manchmal nicht angezeigt, aber in den meisten Fällen zeigt es sich in der Ecke sehr winzig wie in diesem Bild:
Ich habe auch bemerkt, dass der Code für die Klasse widget-scene-canvas , die von Google Maps kommt, sich immer wieder von dem, was ich ursprünglich hatte, durch mein eigenes Design ändert, wenn ich zu verschiedenen Zeiten mehr als die erste Karte anklicke.
2 Antworten
Ich fand heraus, dass ich mehr als ein Problem hatte, um genau zu sein. Dank Ссылка konnte ich feststellen, dass ich meine Map innerhalb des Modals jedes Mal ändern musste, wenn ein Modal geöffnet wurde. Das Skript für das, was nach dem Öffnen des Modals platziert wurde, ist:
%Vor%Das zweite Problem trat auf, als ich bemerkte, dass einige Orte, wenn ich ein Modal öffnete, die Google-Straßenkarten rendert, während andere eine Google-Straßenkarte rendern würden, aber es war schwarz wie dieses Bild:
Was ich entdeckte, war, dass ich den Zoom der gerenderten Straßenkarte auf 0 ändern musste, weil es bei einem 1-Zoom aus dem POV des Autos war und einige Lats und Longs in meiner Karte nicht zoomen konnten, während andere dies konnten Alles hängt davon ab, wo das Google-Auto ein Foto gemacht hat. Hier ist der Code-Hinweis, wo es heißt zoom Ich habe das geändert von einem 1 zoom zu einem 0 :
Das letzte, was ich beheben musste, war, dass der WebGL einen Fehler verursachte, der immer wieder auftauchte. Bei weiteren Ermittlungen zu meinem Ende fiel mir auf, ob ich in der Web-App war oder einfach nur Google-Maps erkundete, es tauchte trotzdem auf. Es schien ein Fehler mit Chrome im Allgemeinen zu sein, also habe ich mir diesen Artikel insbesondere in Ссылка angeschaut Ich folgte dem ersten Beispiel und deaktivierte (siehe unten) von den erweiterten Einstellungen.
Verwenden Sie die Hardwarebeschleunigung, wenn verfügbar
Danach ging ich zurück und testete die Karte und jeder Ort öffnet sich mit der Google-Straßenkarte und dem Webgl-Treffer ein Fehler trat nicht mehr auf.
Hier ist der letzte Code für den Kartenausschnitt meiner Web-App:
%Vor%Dieses Problem hat eigentlich nichts mit webGL und JS zu tun (na ja, nicht so), denn ich vermute, dass jedes Mal, wenn Sie auf einen Speicherort klicken, eine neue webGL-Instanz initialisiert wird und nicht < em> Wiederverwendung Ihrer vorherigen Karte (die zuvor initialisiert wurde), weshalb Sie nur "1 oder 2 öffnen können, bevor webGL einen Haken findet".
Und das wird unglaublich schwer für den Browser, also beschließt es, dass es Zeit für ein Mittagessen ist.
Ich vermute, dass Sie versuchen, eine neue Map mit ajax zu rendern, und dass es dann praktisch wäre, die zuvor initialisierte Map zu zerstören, aber leider Google Maps API habe keine Funktion, um eine Map-Instanz zu zerstören (Mapbox und andere Apis). Aber Google erklärt es offiziell als:
Hallo alle zusammen,
Zunächst entschuldigen Sie bitte, dass wir zu diesem Thema bis jetzt geschwiegen haben.
Als nächstes gibt es eine einfache Lösung, nämlich die Karte wiederzuverwenden Instanzen. Wenn es einen guten Grund gibt, warum du das nicht tun kannst, würde ich es lieben wissen.
Ich bezeichne das als nicht beheben, weil das technisch schwierig ist. Wir sind uns nicht sicher, an wie vielen Orten wir lecken :-( Außerdem müssten wir wahrscheinlich etwas einführen map.destroy () -Methode. Ansonsten, wie sollen wir wissen, ob Sie es sind? Planen Sie die Karte wiederzuverwenden? Javascript hat keine Destruktoren, also wir Ich kann nicht wissen, dass du deine Referenz auf das Objekt weggeworfen hast.
Es tut mir leid, der Überbringer schlechter Nachrichten zu sein.
Sie müssen also sicherstellen, dass Sie nicht jedes Mal eine neue Karte initialisieren, wenn Sie eine neue Teildatei rendern. Aber benutze stattdessen den, den du zuerst initialisiert hast.
Dein Problem lebt hier:
%Vor%Und du zeigst nicht viel davon, wie du das Pop-up nennst, also kann ich dir keinen richtigen Weg vorschlagen. Lassen Sie mich wissen, ob dies für Sie Sinn macht.
Tags und Links javascript google-maps ruby-on-rails google-maps-api-3 gmaps4rails