聚合物传单贴图变形 [英] Polymer leaflet maps distortion

问题描述

我是Polymer和Leaflet.js的新手，在尝试加载地图时，它被扭曲了

I'm new with polymer and leaflet.js, when try load the map this is 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>

我尝试不使用聚合物和传单，但是尝试使用聚合物和此错误图

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

推荐答案

使用 attached 回调代替就绪.

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

        }

当元素附加到文档时，将调用 attached 回调.有关Polymer生命周期回调的更多信息，请查看

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

这篇关于聚合物传单贴图变形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！