Polymer 1.0 dom-repeat with Google Maps

2019-09-02 23:45发布

I am using the latest App Toolbox and app shell structure for my polymer 1.0 project and I am having issues with a dom-repeat template in a custom element, the google-map-markers are not showing up inside the dom-repeat template.

Here is the code:

<dom-module ="sample-map">
   <style>
       :host {
           display: block;
           padding: 10px;
       }

       #mapWrapper{
           height: 600px;
           display:block;
           width: auto;
       }
   </style>
   <template>
      <google-map api-key="MY_API_KEY" fit-to-markers>
          <template is="dom-repeat" items="{{locations}}">
              <google-map-marker latitude="{{item.latitude}}" longitude="{{item.longitude}}"></google-map-marker>
          </template>   
      </google-map>
   </template>

<script>
    Polymer({
        is: 'sample-map',
        properties:{
            locations:{
                type: Array,
                notify: true,
                value: function(){
                    return [];
                }
            }
        },
        addLocation: function(location){
            this.push('locations', location);
        },
        getLocations: function(){
            //.. performs request to get locations from a server
            MyLibrary.get('http://api.testurl.com/locations', function(response){
                  for(var item in response){
                     var location = response[item];
                     this.addLocation(location);
                  }
            }.bind(this));
        }
    });
</script>
</dom-module>

This is pretty much it. I have verified the locations Array is being added to, but after the locations are populated there is no drawing of the google-map-markers.

If i statically set the array, the google-map-markers show up. I have done this exact same thing before without the App shell structure and it works, however before I was not binding the function using .bind(this).

1) Does the .bind(this) limit my scope for the Array and not actually update the locations Array property?

2) How do I update the google-map after my array changes using the array mutations in polymer?

Thanks

0条回答
登录 后发表回答