Question

我是聚合物和leaflet.js的新手，当尝试加载地图时，这是失真的

我的代码

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

        }

当元素附加到文档时，会调用附加回调。有关Polymer lifecycle回调的更多信息，请查看here。

聚合物小叶映射失真

1 个答案: