javascript - 自定义元素中的脚本标签

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

关于将这种类型的加载机制本身概括为一个组件，已经有一些想法，但还没有人付诸实现。