聚合物单张地图失真

Question

我是新与聚合物和leaflet.js，当尝试加载，这是distortionated地图

我的代码

<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> 

我尝试没有聚合物和传单的工作，但尝试使用聚合物和此错误地图

Answer 1

使用附加回调，而不是准备好。

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); 

     } 

当元件被附接到document.For高分子生命周期回调的详细信息的附加回调称为看一看here。