(Polymer) Aktualisieren von google-map nach dem dynamischen Hinzufügen von google-map-markern zu DOM

Question

Derzeit verwenden Sie die Google-Map-Komponente für Polymer und einige Probleme.

https://elements.polymer-project.org/elements/google-map

Was ich will ist dynamisch google-map-Marker tun erstellen, die auf einer Karte angezeigt werden. Diese Koordinaten in der URL sein könnte, packte Daten aus unserer Datenbank usw.

Dies ist, was zur Zeit mein Code wie unten aussieht:

<google-map id="map" fit-to-markers api-key="API-KEY"> 
    <template is="dom-repeat" items="{{data}}"> 
     <google-map-marker latitude="[[item.Latitude]]" longitude="[[item.Longitude]]">Marker</google-map-marker> 
    </template> 
</google-map> 

Hier ist mein Problem, aber. Dies funktioniert NUR, wenn die Marker das DOM-Rendering beenden, bevor die Karte geladen wird. Wenn die Karte zuerst geladen wird, werden die Markierungen nicht angezeigt. Also, ich habe offensichtlich eine Race Condition.

Gibt es eine Möglichkeit, das Google-Map-Element zu aktualisieren, um die neuen Markierungen anzuzeigen, nachdem sie mit dem Rendern im DOM fertig sind? Ich habe das Gefühl, dass ich jede Funktion auf der Seite des Elements vergeblich ausprobiert habe.

Jede Hilfe würde sehr geschätzt werden.

Answer 1

Es stellt sich heraus, dass dies ein Fehler bei der Verwendung des systemeigenen Schatten-DOM mit der Google-Map-Implementierung von Polymer ist.

See GitHub Problem hier: https://github.com/GoogleWebComponents/google-map/issues/299

Eine Abhilfe für dieses Problem ist es, die Kartenmarkierungen der Karte Objekt zu binden (siehe unten):

<google-map id="map" map="{{map}}" fit-to-markers api-key="API-KEY"> 
<template is="dom-repeat" items="{{data}}"> 
    <google-map-marker map="[[map]]" latitude="[[item.Latitude]]" longitude="[[item.Longitude]]">Marker</google-map-marker> 
</template> 

Allerdings habe ich festgestellt, dass Das Problem wurde nicht vollständig behoben. Jede Datenbindung innerhalb des Marker-Tags (innerHTML) wird immer noch nicht wiedergegeben. Auf diese Weise füllen Sie das Informationsfenster mit Informationen auf. Soweit ich das beurteilen kann, funktioniert das immer noch nicht, es sei denn, es handelt sich um statischen Text.

Street View funktioniert auch nicht mit dem nativen Schatten-DOM.

Ich habe herausgefunden, dass unsere App das native Shadow-DOM verwendet. Ich habe es aus einer Laune heraus so eingestellt, dass ich zwielichtiges DOM benutze, und alle meine Probleme lösten sich auf magische Weise auf.