Polymer leaflet maps distortion

问题

I'm new with polymer and leaflet.js, when try load the map this is distortionated

my code

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

<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />

<dom-module id="my-view4">
  <template>
    <style is="custom-style">
    #map {position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0; }

    </style>
                <div id="map"></div>
  </template>

  <script>
    Polymer({
        is: 'my-view4',
        ready: function() {
            var map = L.map(this.$.map).
             setView([41.66, -4.72],
             15);

            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
            maxZoom: 18
            }).addTo(map);

            L.marker([41.66, -4.71],{draggable: true}).addTo(map);

        }

    });
  </script>
</dom-module>

i try without polymer and leaflet work, but try with polymer and this error map

回答1:

Use attached callback instead of ready.

Polymer({
        is: 'my-view4',
        attached: function() {
            var map = L.map(this.$.map).
             setView([41.66, -4.72],
             15);

            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
            maxZoom: 18
            }).addTo(map);

            L.marker([41.66, -4.71],{draggable: true}).addTo(map);

        }

The attached callback is called when the element is attached to the document.For more information on Polymer lifecycle callbacks take a look here.

来源：https://stackoverflow.com/questions/41154141/polymer-leaflet-maps-distortion

标签

polymer

leaflet