webcomponents:多个标记未添加到Google地图网络组件

时间:2017-09-11 19:01:21

标签: google-maps polymer polymer-1.0 google-web-component

我正在尝试使用谷歌地图webcomponents,我正在尝试添加多个标记到纬度,多头位置我跟随问题creating a google map with marker using web-component我尝试添加多个标记,但标记没有添加

 <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">
    <dom-module id="map-view">
   <template>
    <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:'map-view',
  properties:{
   marker:{
    type:Array
   }
  },
  ready: function() {
      this.marker = [
          {latitudine: '41.223596', longitudine: '16.296087'},
          {latitudine: '41.222450', longitudine: '16.291259'}
       ];
    }
   });
 </script>

 </dom-module>

我正在另一个div中使用map-view但是我无法获得多个标记no marker

任何人都可以向jsfiddle展示如何向googlemap webcomponents添加多个标记吗?

1 个答案:

答案 0 :(得分:2)

以上代码完美无缺。您正在查看美国地图,您的标记指向意大利。缩小并查看欧洲。

markers

如果要更改标记附近的默认视图,还可以在google-map元素中设置纬度和经度。像<google-map map="{{map}}" latitude="41.223596" longitude="16.296087" disableDefaultUI fitToMarkers>一样。我正在使用您提供的职位之一。您可以使用最近的纬度和经度。