使用web组件创建带有标记的谷歌地图

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

下面是我的代码:

<!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>

似乎所有谷歌地图的代码都在这里，这里有标记的迭代。

唯一的问题是插入时不显示，没有宽度和高度但是如果我单独调用也可以。

谢谢你的帮助。

编辑

好的，经过更多的研究和测试，我终于做到了。1. 导入"google-api .html"，因为它似乎有助于加载google-map2. 我的google-map样式在文档的头部，我把它放在第一个

代码已更正

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

index . 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>

编辑

相关内容

最新更新

热门标签：