我定义了以下元素:
<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"