从 Google Maps JavaScript API v3 创建聚合物元素？（需要帮助）

Question

似乎无法在主页中加载 google 地图 api。

页-content.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>

和 google api，这是独立工作的。

gmap-simplified.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 作为自定义元素使用。但是当我打开页面-content.html时它只会显示gmaps-simplified.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 页面上有一个“Asynchronous Loading”的示例，但我无法将它用于聚合物。

有人知道如何实现吗？

或者异步加载不是主要问题？

非常感谢帮助！

Answer 1

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

从 Google Maps JavaScript API v3 创建聚合物元素？（需要帮助）

Creating a polymer element from Google Maps JavaScript API v3? (Help needed)

asynchronous

google-maps-api-3

polymer

从 Google Maps JavaScript API v3 创建聚合物元素？ （需要帮助）

Creating a polymer element from Google Maps JavaScript API v3? (Help needed)

asynchronous

google-maps-api-3

polymer

从 Google Maps JavaScript API v3 创建聚合物元素？（需要帮助）