Question

我正在尝试使用聚合物和网络组件在google-map中显示一些标记。

这是我的代码：

<!DOCTYPE html>
<html>
<head lang="fr">
    <meta charset="UTF-8">
    <title></title>
    <script src="bower_components/platform/platform.js"></script>

    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/google-apis/google-apis.html">
    <link rel="import" href="bower_components/google-map/google-map.html">

    <script>
        var airdromes = [
            {
                "name"       : "Anapa-Vityazevo",
                "icao"       : "URKA",
                "country"    : "RU",
                "type"       : "civ",
                "coord"      : {
                    "latitude" : 44.995834,
                    "longitude": 37.334445,
                    "elevation": 147,
                    "heading"  : 41
                },
                "frequencies": {
                    "tower": 121,
                    "tacan": ""
                }
            },
            {
                "name"       : "Batumi",
                "icao"       : "UGSB",
                "country"    : "GE",
                "type"       : "civ",
                "coord"      : {
                    "latitude" : 41.6166667,
                    "longitude": 41.589722223,
                    "elevation": 32,
                    "heading"  : 125
                },
                "frequencies": {
                    "tower": 131,
                    "tacan": "16X (BTM)"
                }
            }
        ];
    </script>

</head>
<body>

<h1>my-map</h1>
<polymer-element name="my-map">
    <template>
        <style>
            google-map {
                display: block;
                width: 400px;
                height: 400px;
            }
        </style>
        <google-map map={{map}} disableDefaultUI fitToMarkers>
            <template repeat="{{airdrome in airdromes}}">
                <google-map-marker map={{map}} latitude="{{airdrome['coord']['latitude']}}"
                                   longitude="{{airdrome['coord']['longitude']}}"></google-map-marker>
            </template>
        </google-map>
    </template>
    <script>
        Polymer('my-map', {
            airdromes: airdromes,
            ready    : function() {
                console.log('this.airdromes :', this.airdromes);
            }
        });
    </script>
</polymer-element>


<my-map></my-map>

</body>
</html>

似乎google-map的所有代码都在这里，标记有迭代。

我唯一的问题是＆lt; google-map /＆gt;当插入＆lt;聚合物元件/＆gt;中时，不显示，没有宽度和高度。但是，如果我单独打电话就可以。

感谢您的帮助。

修改

好的，经过更多的研究和测试，我终于实现了这一目标。 1.导入“google-apis.html”，因为它似乎有助于加载google-map 2.我的google-map样式位于文档的头部，我把它放在第一个＆lt; template＆gt;之后。在＆lt; google-map＆gt;之前 3.我拼错了“fittomarker”并用好名字和tada改变它！

代码已得到纠正。

Answer 1

Polymer 1.0的工作方式不同，您需要创建两个HTML页面。这是代码：

的index.html

    gets(ch); // the program stops here
    p=ch;

    while(ch!='\0')
    { p++;
        size++;
    }


    for(i=0;i<20;i++)
    {
        if(c[i]==c[j])
            printf("string is pallindrome");

        else printf("string is not pallindrome");
     }

    getch();
    return 0;
}

Mappa.html

<!DOCTYPE html>
<html>
  <head>
   <meta charset="UTF-8">
   <title>Google Map</title>
   <link rel="import" href="bower_components/google-apis/google-apis.html">
   <link rel="import" href="bower_components/google-map/google-map.html">

   <link rel="import" href="mappa.html">
  </head>

  <body>

    <my-map></my-map>

  </body>
</html>

使用网络组件使用标记创建谷歌地图

修改

1 个答案: