Polymer，如何打开/关闭google-map-marker InfoWindow？ [英] Polymer, how to open/close google-map-marker InfoWindow?

问题描述

我使用的是webcomponent 谷歌地图-marker 在由我创建的Polymer元素中。我想赶上点击它在我的组件中做一些后缀，所以我试着在我的模板上：

 < div horizo​​ntal layout flex style =height：400px;> 
< div class =panel-contentsvertical layout flex> 
 < google-map-marker latitude =45.5601451longitude = -  73.7120832map ={{map1}}clickEvents =truegoogle-map-marker-click ={{markerClicked}} >< / google-map-marker> 
< / google-map> 
< / div> 
< / div> 
  

以及脚本部分

<$ p $聚合物（{
markerClicked：function（）{
//这不会被触发！
}，

}）;

有没有这样做的方法？提前致谢。

PS：顺便说一句，我最初想要做的就是关闭所有其他标记InfoWindow（如果它们是可见的），然后显示刚刚点击过的标记。如果有人对它有一个更好的解决方法的想法，这将是非常棒的。

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

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

这就是所谓的声明式事件映射： [1] ， [2]

..

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

  markerClicked：function（e，detail，sender）{ 
 
 console.log（'google_map_marker_click'）; 
 
 ///////////////////////////////////// 
 / /设置标记infowindow默认使用它的API打开
 // 
 //选择地图和标记：
 // var map_marker_1 = this。$。map_marker_1; 
 // var google_map = this。$。map_1; 
 //打开信息：
 // google_map_marker.info.open（google_map.map，google_map_marker.marker）; 
 ///////////////////////////////////// 
 
 / //////////////// 
 // b //关闭标记infowindow 
 / / 
 //console.log(sender.tagName）; 
 //console.log(sender.info);//marker's info object 
 //console.log(sender.info.content）; 
 
 //或者按ID选择标记：
 // var map_marker_1 = this。$。map_marker_1; 
 
 //这是关闭标记infowindow 
 sender.info.close（）; 
 //或
 // map_marker_1.info.close（）; 
 ///////////////////////////////////// 
 
} ，
  

下面是示例 Plunk

I'm using the webcomponent google-map-marker in a Polymer element created by me. I want to catch the click on it to do something afterwords in my component, so I tried this on my template:

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

and in the script part

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

});

Is there a way of doing this? Thanks in advance.

PS: Btw, what I originally wanted to do was close all the other markers InfoWindow if they are visible, before showing the one of the just clicked marker. If someone has an idea of a better workaround for it, that would be awesome.

解决方案

You are missing one "on-" in calling the function, right way would be:

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

This is called Declarative event mapping: [1], [2]

..

Here is how markers infoWindows are opened or closed using Maps API:

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();
          /////////////////////////////////////

        },

Here is example Plunk

这篇关于Polymer，如何打开/关闭google-map-marker InfoWindow？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！