Question

我定义了以下元素：

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

但是，事件监听器根本不起作用。我试过在各个地方调用它但没有成功。每当用户拖动地图时，我都想让事件监听器调用一个函数。

我使用Polymer 1.0和Eric Bidelman's excellent geo-locate component。这是Documentation for google-map component。

Answer 1

事实证明事件侦听器位于正确的位置，因为ready属性仅在页面上的所有组件都已完成加载时触发。

我犯的错误实际上是一个常规问题，因为Polymer文档中的属性通过使用＆＃39; - ＆＃39; es来分隔单词。我记得在文档中的某处读取属性应该用HTML中的破折号分隔：

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

现在工作正常。

在Polymer中将eventListener添加到google-map元素的正确位置在哪里？

1 个答案: