2

我正在尝试使用聚合物和网络组件在谷歌地图中显示一些标记。

这是我的代码：

<!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/> 不显示，插入 <polymer-element/> 时没有宽度和高度，但如果我单独调用它就可以了。

谢谢您的帮助。

编辑

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

代码已更正。

4

1 回答 1

1

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

索引.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>

Mappa.html

<dom-module id="my-map">
<template>
    <style>
        google-map {
            display: block;
            width: 100%;
            height: 100%;
        }
    </style>
    <google-map map="{{map}}" disableDefaultUI fitToMarkers>
        <template is="dom-repeat" items="{{marker}}">
            <google-map-marker map={{map}} latitude="{{item.latitudine}}" longitude="{{item.longitudine}}">
            </google-map-marker>
        </template>
    </google-map>
</template>

<script>
    Polymer({
        is: 'my-map', 
        ready: function() {
            this.marker = [
                {latitudine: '41.223596', longitudine: '16.296087'},
                {latitudine: '41.222450', longitudine: '16.291259'}
            ];
        }
    });
</script>

于 2015-06-23T17:53:33.097 回答