使用 Polymer 循环 Google 地图标记

Question

我正在使用 <google-map> 聚合物组件，如下所示：

 <template>
    <google-map additional-map-options='{"mapTypeId":"hybrid"}' fit-to-markers>
       <google-map-marker latitude={{latitude}} longitude={{longitude}}
                     draggable="true" title={{title}}></google-map-marker>

     </google-map>
</template>
<script>
    Polymer({
      is: "my-map",
      ready: function () {
          this.latitude = 39.3991186;
          this.longitude = -79.5913991;
          this.title = "Marker 1"

      }
  });
</script>

如果我有很多标记（超过100个标记），例如下面，我如何循环并自动将所有标记添加到地图中？

  markers: [{"lat": 35.137879, "lon": -76.5913991, "title":"Marker 1"},
             {"lat": 35.137879, "lon": -82.836914, "title":"Marker 2"},
             {"lat": 47.651968, "lon": -82.836914, "title":"Marker 3"},
              ...]

Answer 1

要遍历 markers 数组，您可以像这样使用 dom-repeat template：

<google-map ...>
  <template is="dom-repeat" items="{{markers}}">
    <google-map-marker 
        latitude="{{item.lat}}" longitude="{{item.lon}}"
        title="{{item.title}}" 
        animation="DROP">
        <h4>{{item.title}}</h4>
    </google-map-marker>
  </template>
</google-map>

codepen

使用 Polymer 循环 Google 地图标记

Loop Google map markers using Polymer

google-maps

google-maps-markers

polymer