Javascript Google Map API V3在聚合物元素中不起作用_Javascript_Html_Google Maps Api 3_Polymer

Javascript Google Map API V3在聚合物元素中不起作用

javascript html google-maps-api-3 polymer

Javascript Google Map API V3在聚合物元素中不起作用,javascript,html,google-maps-api-3,polymer,Javascript,Html,Google Maps Api 3,Polymer,我创建了聚合元素，并在其中添加了谷歌地图。如果我将聚合物元素的代码直接写入主文件中，我想在主文件中使用它，它可以正常工作，但如果我将其代码保存在单独的文件中，并通过导入使用它，则在控制台中会出现以下错误：未能对“文档”执行“写入”：无法写入从异步加载的外部脚本导入文档，除非它是显式打开的以下是my-map.html文件的代码： <link rel="import" href="bower_components/polymer/polymer.html"> <script

我创建了聚合元素，并在其中添加了谷歌地图。如果我将聚合物元素的代码直接写入主文件中，我想在主文件中使用它，它可以正常工作，但如果我将其代码保存在单独的文件中，并通过导入使用它，则在控制台中会出现以下错误：

未能对“文档”执行“写入”：无法写入从异步加载的外部脚本导入文档，除非它是显式打开的

以下是my-map.html文件的代码：

<link rel="import" href="bower_components/polymer/polymer.html">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<polymer-element name="my-map">
        <template>
            <style type="text/css">
            :host{
                display: block;
            }
                #mapCanvas {
            height: 100%;
            margin: 0px;
            padding: 0px;
          }
            </style>
            <div id="mapCanvas"></div>
        </template>
        <script type="text/javascript">
            Polymer({
                map:null,
                ready:function(){

                    this.map = new google.maps.Map(this.$.mapCanvas, {
                    center: new google.maps.LatLng(41, -91),
                    disableDefaultUI: true,
                    zoom: 5
                     });
                }
            });
        </script>
    </polymer-element>


：主持人{
显示：块；
}
#地图画布{
身高：100%；
边际：0px；
填充：0px；
}
聚合物({
map:null，
就绪：函数（）{
this.map=new google.maps.map（this.$.mapCanvas{
中心：新google.maps.LatLng（41，-91），
disableDefaultUI:true，
缩放：5
});
}
});

这是主文件index.html的代码：

<!DOCTYPE html>
<html>
<head>
    <title>My Map</title>

    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="my-map.html">
</head>
<body>
<my-map style="height:500px,width:500px;"></my-map>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>My Map</title>
    <!-- include google maps lib into your main index.html file -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="my-map.html">
</head>
<body>
    <my-map width="500px" height="500px"></my-map>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>My Map</title>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="my-map.html">
</head>
<body>
    <!-- use default width/height -->
    <my-map></my-map>
</body>
</html>


我的地图

问题在哪里？如果我在index.html文件中编写my-map.html文件的代码，那么它工作得非常完美。

粗略的文件结构：

文件：index.html
文件：my-map.html
目录：bower_组件/
- 目录：核心组件页/
- 目录：polymer/
- 目录：webcomponentsjs/

当谷歌地图库包含在聚合物元素的定义之上时，谷歌地图似乎未能在聚合物元素上构建地图。这可能是一个/多个原因造成的。但至少有两种解决方案适合我

第一个解决方案

尝试从聚合元素中排除google maps库，并将其包含到index.html文件中：

<link rel="import" href="bower_components/polymer/polymer.html">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<polymer-element name="my-map">
        <template>
            <style type="text/css">
            :host{
                display: block;
            }
                #mapCanvas {
            height: 100%;
            margin: 0px;
            padding: 0px;
          }
            </style>
            <div id="mapCanvas"></div>
        </template>
        <script type="text/javascript">
            Polymer({
                map:null,
                ready:function(){

                    this.map = new google.maps.Map(this.$.mapCanvas, {
                    center: new google.maps.LatLng(41, -91),
                    disableDefaultUI: true,
                    zoom: 5
                     });
                }
            });
        </script>
    </polymer-element>

index.html：

<!DOCTYPE html>
<html>
<head>
    <title>My Map</title>

    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="my-map.html">
</head>
<body>
<my-map style="height:500px,width:500px;"></my-map>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>My Map</title>
    <!-- include google maps lib into your main index.html file -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="my-map.html">
</head>
<body>
    <my-map width="500px" height="500px"></my-map>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>My Map</title>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="my-map.html">
</head>
<body>
    <!-- use default width/height -->
    <my-map></my-map>
</body>
</html>


我的地图

聚合物元素（my map.html）：


：主持人{
显示：块；
}
#地图画布{
边际：0px；
填充：0px；
}
聚合物({
map:null，
宽度：“100px”，//默认宽度
高度：“100px”，//默认高度
就绪：函数（）{
//map canvas位于阴影dom中，因此普通*querySelector*、*querySelectorAll*或*getElementById*方法无法访问它，但这是一种方法：this.$.mapCanvas
this.map=new google.maps.map(
这是$.mapCanvas，
{center:new google.maps.LatLng（41，-91），
disableDefaultUI:true，
缩放：5
}
);
}
});

第二种解决方案：

尝试使用google地图库的回调参数（url部分：&callback=callback），并将google地图库包含到聚合元素的定义中：

index.html：

<!DOCTYPE html>
<html>
<head>
    <title>My Map</title>

    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="my-map.html">
</head>
<body>
<my-map style="height:500px,width:500px;"></my-map>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>My Map</title>
    <!-- include google maps lib into your main index.html file -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="my-map.html">
</head>
<body>
    <my-map width="500px" height="500px"></my-map>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>My Map</title>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="my-map.html">
</head>
<body>
    <!-- use default width/height -->
    <my-map></my-map>
</body>
</html>


我的地图

聚合物元素（my map.html）：


：主持人{
显示：块；
}
#地图画布{
边际：0px；
填充：0px；
}
//使用IIFE封装所有定义的变量，以防止它们被无意地分配给窗口对象
（功能（）{
var googlemapsrady=false；
var-myMapPolymer；
var-htmlCanvasMap；
函数回调（）{
googleMapsReady=true；
如果（htmlCanvasMap）{
构建地图（htmlCanvasMap）；
}
}
//！！！很遗憾，您必须将回调函数分配给窗口对象
//因为这个函数必须是全局可访问的，否则谷歌地图库将找不到它并抛出一个错误
window.callback=回调；
//函数在您的站点上显示一个google地图，该地图包含一个html元素，地图应显示在该元素上
函数构建映射（htmlmap）{
var map=new google.maps.map(
htmlmap，
{center:new google.maps.LatLng（38，-91），
disableDefaultUI:true，
缩放：8
}
);
//最后将google map对象指定为聚合元素的属性
myMapPolymer.map=map；
}
//聚合物元件代码定义
聚合物({
map:null，
宽度：“100px”，//默认宽度
高度：“100px”，//默认高度
就绪：函数（）{
myMapPolymer=这个；
//将地图画布（div）指定给Variable，以便使用它构建地图，
htmlCanvasMap=此.$.mapCanvas；
如果（谷歌地图）{
构建地图（htmlCanvasMap）；
}
}
});
})();

在第二种解决方案中，仍然有机会将初始化的google map对象作为属性指定给聚合元素：

变量googleMapsReady在加载GoogleMaps并准备好使用时设置。这将在Polymer.ready函数中进行检查
否则，如果在回调之前调用Polymer.ready，则会分配变量htmlCanvasMap，因此在回调函数中选中时为true

希望这能有所帮助。

在第二个示例中，出现了一个i