从 Google Maps JavaScript API v3 创建聚合物元素?(需要帮助)

Question

似乎无法在主页中加载谷歌地图API。

页面内容.html

<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="gmaps-simplified.html" async>
<polymer-element name="page-content">
    <style>
        :host {
            height: 100%;
            width: 100%;
        }
        .page-content {
            width: 100%;
            height: 100%;
            background-color: black;
        }
    </style>
    <gmaps-simplified ></gmaps-simplified>
<script>
    Polymer({
    });
</script>
</polymer-element>
<page-content></page-content>

和谷歌API，这自己工作。

GMAP简化.html

<link rel="import" href="../components/polymer/polymer.html">
<polymer-element name="gmaps-simplified">
<template>
    <div id="mapCanvas" style="background-color:#73da9c;width: 100%;height: 100%"></div>
</template>
<script>
    Polymer('gmaps-simplified', {
        ready: function () {
            var stylers = [
                {
                    featureType: "water",
                    stylers: [
                        {
                            color: "#73da9c"
                }
]
}, {
                    featureType: "administrative",
                    stylers: [
                        {
                            visibility: "off"
                }
]
}, {
                    featureType: "landscape",
                    elementType: "labels",
                    stylers: [
                        {
                            color: "#808080"
                },
                        {
                            visibility: "off"
                }
]
}, {
                    featureType: "poi",
                    stylers: [
                        {
                            visibility: "off"
                }
]
}, {
                    featureType: "road",
                    stylers: [
                        {
                            visibility: "off"
                }
]
}, {
                    featureType: "transit",
                    stylers: [
                        {
                            visibility: "off"
                }
]
}, {
                    elementType: "labels",
                    stylers: [
                        {
                            visibility: "off"
                }
]
}, {
                    featureType: "landscape",
                    elementType: "geometry.stroke",
                    stylers: [
                        {
                            visibility: "off"
                }
]
}, {
                    featureType: "landscape",
                    elementType: "geometry",
                    stylers: [
                        {
                            color: "#cff2dd"
                }
]
}
];
            var minZoomLevel = 3;
            var map = new google.maps.Map(this.$.mapCanvas, {
                zoom: minZoomLevel,
                center: new google.maps.LatLng(35, 6.852363),
                disableDefaultUI: true,
                mapTypeControlOptions: {
                    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'custommap']
                }
            });

            var styledMapOptions = {
                name: 'Nick Style'
            };
            var customStyledMap = new google.maps.StyledMapType(
                stylers, styledMapOptions);
            map.mapTypes.set('custommap', customStyledMap);
            map.setMapTypeId('custommap');
            // Limit the zoom level
            google.maps.event.addListener(map, 'zoom_changed', function () {
                if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
            });
        }
    });
  </script>
 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={KEY}">
</script>
</polymer-element>
<gmaps-simplified></gmaps-simplified>

我让 api 作为自定义元素工作。但是当我打开页面内容时.html它只会显示 gmaps 简化的背景颜色.html控制台会给出以下错误消息：

ConsoleAgent: Failed to execute 'write' on 'Document': It isn't possible to      
write into a document from an asynchronously-loaded external script unless  
it is explicitly opened. (url: https://maps.googleapis.com/maps/api/js?
key={{KEY}}) in getScript:14

和：

 ConsoleAgent: Uncaught TypeError: undefined is not a function (url: 
 http://127.0.0.1:56264/elements/gmaps-simplified.html) in Polymer.ready:29

api页面上有一个"异步加载"的示例，但我无法将其用于聚合物。

有人知道如何实现这一目标吗？

还是异步加载不是主要问题？

非常感谢帮助！

Answer 1

认为您可能必须将加载谷歌地图的脚本标签带入页面的实际正文元素中，或者可能只是在聚合物元素定义的范围之外，尽管当您的组件从另一个组件中加载时，最后一个解决方案可能会中断。