Question

我正在使用使用Google Map的api的Polymer创建自定义元素。我希望这个元素能够包含Google Map的脚本标记。

这应该放在自定义元素中？只需将其放在页面顶部就会引发跨域问题。

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

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

<polymer-element name="google-map" noscript>
    <template>
        <div id="stage"></div>
    </template>

    <script>
        Polymer('google-map', {
            ready: function() {
                new google.maps.Map(this.$.stage, {
                    zoom: 15,
                    center: new google.maps.LatLng(0, 0),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    overviewMapControl: false,
                    panControl: false,
                    rotateControl: false,
                    scaleControl: false,
                    streetViewControl: false,
                    draggable: false,
                    maxZoom: 21
                });
            }
        });
    </script>
</polymer-element>

Answer 1

Fwiw，我相信规范中目前的分配是<script src...>将在进口中限制CORS。

您可以在我们的google-maps元素中看到我们如何处理此问题：

https://github.com/Polymer/google-map/blob/master/google-map.html

有一些想法围绕将这种类型的加载机制本身概括为一个组件，但还没有人执行过。

自定义元素中的脚本标记

1 个答案: