在聚合物中向google-map元素添加eventListener的正确位置在哪里?



我定义了以下元素:

<dom-module id="my-element">
  <style>
    :host {
      display: block;
    }
    google-map {
      height: 600px;
    }
  </style>
  <template>
    <geo-location highAccuracy watchpos latitude="{{lat}}" longitude="{{lng}}"></geo-location>
    <google-map id="myMap" latitude="{{lat}}" longitude="{{lng}}" dragEvents="true" zoom="16"></google-map>
    <br>
    <small>Latitude: <b>{{lat}}</b></small><br>
    <small>Longitude: <b>{{lng}}</b></small><br>
  </template>
  <script>
    (function() {
      Polymer({
        is: 'my-element',
        ready: function() {
          this.$.myMap.addEventListener('google-map-dragend', function(e) {
            alert('Map has moved.');
          });
        }
      });
    })();
  </script>
</dom-module>

但是,事件侦听器根本不起作用。我试着在很多地方打电话,但都没有成功。我想让事件监听器在每次用户拖动地图时调用一个函数。

我使用聚合物1.0与Eric Bidelman的优秀的地理定位组件。下面是google-map组件的文档

事件侦听器的位置是正确的,因为只有当页面上的所有组件都完成加载时,ready属性才会触发。

我所犯的错误实际上是一个约定问题,因为聚合物文档中的属性通过使用'-'es分隔单词被翻译成代码。我记得在文档的某个地方读到,HTML中的属性应该用破折号分隔:

dragEvents="true"应为drag-events="true"

最新更新