1

Google マップの API を使用する Polymer を使用してカスタム要素を作成しています。この要素に、Google マップのスクリプト タグを含めて処理してもらいたいと考えています。

カスタム要素内のどこに配置する必要がありますか? 単純にページの上部に配置すると、クロスオリジンの問題が発生します。

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

1 に答える 1

1

Fwiw、仕様の現在の分配は、<script src...>インポートで制限された CORS になるということだと思います。

この問題を google-maps 要素でどのように処理したかは、次の場所で確認できます。

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

このタイプの読み込みメカニズム自体をコンポーネントに一般化するアイデアはいくつかありますが、まだ誰も実行していません。

于 2014-02-12T22:54:57.280 に答える