Übergeben Sie Array- und/oder Objektdaten zwischen Polymerelementen

Question

Ich richte ein benutzerdefiniertes Google-Maps-Polymer-Element namens "locator-map" ein, das Polymer-Jsonp verwendet, um Daten aus einer Google-Tabelle abzurufen, die Antwort zu übernehmen und zu senden auf ein benutzerdefiniertes "google-map" -Element, um die Markierungen auf der Karte zu zeichnen. Ich kann nicht herausfinden, wie ich tatsächlich die Daten, die vom Polymer-jsonp-Element zurückkommen, in mein Google-Map-Element injizieren kann, um daraus die Marker zu konstruieren.

Hier ist meine Datenquelle: https://spreadsheets.google.com/feeds/list/0Ao_YrKZEsc4AdGppeG1zaGotRDd0LUdIYk9tdW9VZnc/od6/public/values?alt=json-in-script

I Richtungen hier folgte zunächst einzurichten: http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/

-Code für mein Locator-Karte Element:

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html"> 
<link rel="import" href="google-map.html"> 

<polymer-element name="locator-map" attributes=""> 
    <template> 
     <style> 
      /* styles for the custom element itself - lowest specificity */ 
      :host { display: block; } 
      google-map { 
       display:block; 
       height:600px; 
      } 
     </style> 

     <!-- Load Data with JSONP Endpoint (in this case Google Spreadsheets) 
      Format: https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc/od6/public/values?alt=json-in-script&callback= 
      Source: https://docs.google.com/spreadsheet/ccc?key=0AqZBbhllhMtHdFhFYnRlZk1zMzVZZU5WRnpLbzFYVFE&usp=sharing 
     --> 
     <polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/0Ao_YrKZEsc4AdGppeG1zaGotRDd0LUdIYk9tdW9VZnc/od6/public/values?alt=json-in-script&callback=" response="{{locations}}"></polymer-jsonp> 

     <ul> 
      <template repeat="{{location in locations.feed.entry}}"> 
       <li>Name: {{location.gsx$name.$t}} 
       <ul><li>Lat: {{location.gsx$lat.$t}}</li><li>Long: {{location.gsx$lng.$t}}</li></ul> 
       </li> 
      </template> 
     </ul> 

     <!-- Load the Google Map --> 
     <google-map map="{{map}}" latitude="45.526158" longitude="-122.679394" zoom="14" markers="{{locations}}"></google-map> 

    </template> 
    <script> 
    Polymer('locator-map', { 
     // element is fully prepared 
     ready: function(){ 
     }, 
     // instance of the element is created 
     created: function() { }, 
     // instance was inserted into the document 
     enteredView: function() { }, 
     // instance was removed from the document 
     leftView: function() { }, 
     // attribute added, removed or updated 
     attributeChanged: function(attrName, oldVal, newVal) { } 
    }); 
    </script> 
</polymer-element> 

-Code für meinen Google -Kartenelement:

<link rel="import" href="../bower_components/polymer/polymer.html"> 

<polymer-element name="google-map" attributes="latitude longitude zoom showCenterMarker map markers"> 
    <template> 
     <style> 
      :host { 
       position: relative; 
      } 

      #map { 
       position: absolute; 
       top: 0; 
       right: 0; 
       bottom: 0; 
       left: 0; 
      } 
     </style> 

     <div id="map"></div> 
    </template> 
    <script> 
     (function() { 
      var CALLBACK_NAME = 'polymer_google_map_callback'; 
      var MAP_URL = 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&sensor=false&callback=' + CALLBACK_NAME; 
      var pendingCallbacks = []; 
      var loading; 

      function loadMapApi(callback) { 
       if (window.google && window.google.maps) { 
        callback(); 
        return; 
       } 
       if (!loading) { 
        loading = true; 
        window[CALLBACK_NAME] = mapApiLoaded.bind(this); 
        var s = document.createElement('script'); 
        s.src = MAP_URL; 
        document.head.appendChild(s); 
       } 
       pendingCallbacks.push(callback); 
      } 

      function mapApiLoaded() { 
       delete window[CALLBACK_NAME]; 
       pendingCallbacks.forEach(function(callback) { 
        callback(); 
       }); 
      } 

      Polymer('google-map', { 
       latitude: '37.77493', 
       longitude: '-122.41942', 
       zoom: 10, 
       showCenterMarker: false, 
       observe: { 
        latitude: 'updateCenter', 
        longitude: 'updateCenter' 
       }, 
       ready: function() { 
        loadMapApi(this.mapReady.bind(this)); 
       }, 
       created: function() { 
       }, 
       enteredView: function() { 
        this.resize(); 
       }, 
       mapReady: function() { 

        // Create the Map 
        this.map = new google.maps.Map(this.$.map, { 
         zoom: this.zoom, 
         center: new google.maps.LatLng(this.latitude, this.longitude) 
        }); 

        // Show Center Marker 
        this.showCenterMarkerChanged(); 

        // Add Markers (if any supplied) 
        this.addMarkers(); 

        // Fire the Map Ready Event 
        this.fire('google-map-ready'); 
       }, 
       resize: function() { 
        if (this.map) { 
         google.maps.event.trigger(this.map, 'resize'); 
         this.updateCenter(); 
        } 
       }, 
       updateCenter: function() { 
        if (!this.map) { 
         return; 
        } 
        this.map.setCenter(
          new google.maps.LatLng(this.latitude, this.longitude)); 
        this.showCenterMarkerChanged(); 
       }, 
       zoomChanged: function() { 
        if (this.map) { 
         this.map.setZoom(Number(this.zoom)); 
        } 
       }, 
       showCenterMarkerChanged: function() { 
        if (!this.map) { 
         return; 
        } 
        if (!this.centerMarker && this.showCenterMarker) { 
         this.centerMarker = new google.maps.Marker({ 
          map: this.map 
         }); 
        } 
        if (this.centerMarker) { 
         this.centerMarker.setPosition(this.map.getCenter()); 
         this.centerMarker.setMap(this.showCenterMarker ? this.map : null); 
        } 
       }, 

       /* 
       * Add Markers 
       * Adds markers to the map. Expects an array of objects specifying the location information via name, lat and lng properties. 
       * 
       * @author erikharper 
       */ 
       addMarkers: function() 
       { 
        console.log("Markers: "); 
        console.log(this.markers); 

        // Get the Map instance 
        var map = this.map; 

        if(this.markers.isArray()) 
        { 
         // Create each Marker on the Map 
         this.markers.forEach(function(marker){ 

          // Create a LatLng object 
          var markerLatLng = new google.maps.LatLng(marker.lat, marker.lng); 

          // Create the Marker object and add it to the map via the map property 
          new google.maps.Marker({ 
           map: map, 
           position: markerLatLng, 
           title: marker.name 
          }); 
         }); 
        } 

       } 

      }); 
     })(); 
    </script> 
</polymer-element> 

Auf meiner Konsole bekomme ich ein "this.markers is null". Was mache ich falsch?

Answer 1

Sie haben markers="{{locations}}", was die reine JSON-Antwort von der Komponente polymer-jsonp ist. Ich musste die Daten transformieren und zu analysieren, die lat/lng zuerst:

var markers = []; 
markers.push({ 
    lat: parseFloat(entry.gsx$lat.$t), 
    lng: parseFloat(entry.gsx$lng.$t), 
    name: entry.gsx$name.$t 
}); 
this.markers = markers; 

Die Art und Weise näherte ich mich war das bestehende Polymer google-map Element wieder zu verwenden: http://jsbin.com/wowuledo/6/edit

Das wichtige Bit ist, dass, wenn die this.markers Array ändert,

markersChanged: function() { 
    this.addMarkers(); 
    }, 
    addMarkers: function() { 
    this.markers.forEach(function(marker) { 
     var marker = new google.maps.Marker({ 
     map: this.map, 
     position: new google.maps.LatLng(marker.lat, marker.lng), 
     title: marker.name 
     }); 
    }.bind(this)); 
    } 

Wenn Sie cre Muss: markersChanged wird, was wiederum ruft Ihre addMarkers (die ich geändert) genannt aß ein zusätzliches Element, um eigene Eigenschaften/Methoden hinzuzufügen, warum erben nicht von google-maps?

<polymer-element name="google-map-with-markers" extends="google-map" attributes="markers"> 

Auf diese Weise erhalten Sie alle Funktionen von google-maps, kann aber Daten-binden an die markers veröffentlicht Eigenschaft:

<google-map-with-markers latitude="45.526158" longitude="-122.679394" zoom="14" markers="{{markers}}"></google-map-with-markers> 

Versuchen: http://jsbin.com/renuyifu/1/edit