Question

我在我创建的Polymer元素中使用了webcomponent google-map-marker。我想抓住点击它来在我的组件中执行一些后续操作，所以我在我的模板上尝试了这个：

<div horizontal layout flex style="height: 400px;">
  <div class="panel-contents" vertical layout flex>
    <google-map flex  map="{{map1}}" latitude="45.5601451" longitude="-73.7120832">
       <google-map-marker latitude="45.5601451" longitude="-73.7120832"  map="{{map1}}" clickEvents="true" google-map-marker-click="{{markerClicked}}" ></google-map-marker>
    </google-map>
  </div>
</div>

并在脚本部分

Polymer({
  markerClicked: function () {
    //this is never triggered!
  },

});

有没有办法做到这一点？提前谢谢。

PS：顺便说一句，我最初想要做的是在显示所有其他标记InfoWindow之前关闭它们，然后再显示一个刚刚点击的标记。如果有人想知道更好的解决方法，那就太棒了。

Answer 1

你在调用函数时缺少一个“on-”，正确的方法是：

on-google-map-marker-click="{{markerClicked}}"

这称为声明性事件映射：[1]，[2]

...

以下是使用Maps API打开或关闭标记infoWindows的方法：

markerClicked: function(e, detail, sender) {

          console.log('google_map_marker_click');

          /////////////////////////////////////
          //Seting marker infowindow to be open by default using it's API
          //
          //Select the map and the marker:
          // var map_marker_1 =  this.$.map_marker_1;
          // var google_map = this.$.map_1;
          //Open the info:
          // google_map_marker.info.open(google_map.map, google_map_marker.marker);
          /////////////////////////////////////

          /////////////////////////////////////
          //Closing marker infowindow
          //
          //console.log(sender.tagName);
          //console.log(sender.info);//marker's info object
          //console.log(sender.info.content);

          //or select the marker by id:
          //var map_marker_1 =  this.$.map_marker_1;

          //this is closing marker infowindow
          sender.info.close();
          //or 
          // map_marker_1.info.close();
          /////////////////////////////////////

        },

以下是示例Plunk

Answer 2

更新Goce Ribeski在1.0中的回答：

clickEvents现在应为click-events。 camelCase translates to attributes with dashes
圆括号为removed from event listeners。

即。 click-events="true" on-google-map-marker-click="markerClicked"

聚合物，如何打开/关闭google-map-marker InfoWindow？

2 个答案: