聚合物入门套件,谷歌地图,示例在一起

时间:2016-12-01 02:15:56

标签: polymer google-maps-api-2

我正在尝试在Polymer Starter-kit页面上显示google-map。

我从Polymer init开始...使用标准的Starter-kit ... 做一个...... bower install - 保存GoogleWebComponents / google-map 我得到了Google地图密钥...

一切都很好......除了。 我无法将该死的地图显示在页面上。 我可以通过示例和教程......没问题。 但是让标签在Start-kit中工作一直是个问题。 有没有人在Starter-kit中有一些google-map的例子? 理想情况下,您在哪里创建/使用自定义模块?

1 个答案:

答案 0 :(得分:0)

按宣传方式工作。这是My-viewX.html页面之一的代码。只需按照上述说明操作,即可添加此代码。保持调整,我将添加数据绑定

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

<dom-module id="my-view5">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        padding: 10px;
      }
      google-map {
        height: 600px;
      }
</style>
    </style>

    <div class="card">
        <h1>Put map here here</h1>
    </div>

<div class="card">
<google-map 
    latitude="37.779" 
    longitude="-122.3892"
    api-key="AIzaStyggztMTmDZ34gjjjdtasMC67fgdme4jOC5Nqk"     
    zoom="13" 
    disable-default-ui>
    <google-map-marker  
        latitude="37.779" 
        longitude="-122.3892"
        title="Go Giants!" 
        draggable="true">
    </google-map-marker>

    <google-map-marker 
      latitude="37.77493" 
      longitude="-122.41942"
        title="Go tits!">
    </google-map-marker>
    </google-map>
    </div>
  </template>

  <script>
    Polymer({
      is: 'my-view5'
    });
  </script>
</dom-module>