如何为 google maps api v3 对象创建自定义事件？

Question

我想制作一种特殊类型的多边形对象，它环绕或继承自 google.maps.Polygon 类。我希望它有一个可以收听的自定义edited 事件，最好是通过普通的addListener 接口。这个可以吗？

Answer 1

在标题为 Fun with MVC 的 Google Developers 文章中，我们找到了两种方法。

1. 在Binding Properties 部分中，我们了解到每当在MVCObject 上调用set(property, value) 方法时，都会调用一个神奇的property_changed 函数（如果存在）。

   // Prints "something changed to ftw!!!"
   myObject.something_changed = function(){
     console.log('something changed to ' + this.get('something'));
   }
   myObject.set('something', 'ftw!!!');
   

2. 在Outputting Information 部分中，我们了解到不那么神秘的addListener() 方法也可用于通过set() 监听值的变化。下面的代码 sn-p 和上面的代码完全一样。

   // Prints "something changed to ftw!!!"
   myObject.addListener('something_changed', function(){
     console.log('something changed to ' + this.get('something'));
   }
   myObject.set('something', 'ftw!!!');
   

我更喜欢方法 #2，因为它涉及的黑魔法更少。

Answer 2

我喜欢 JustinY 的回答。

另一种方法是手动触发这样的事件：

 function CustomPolygon(options) {
     var self = this;
     // initialize any options
     console.log('init')
 }

 function edit() {
     // do work!!!
     // now tell people about it!
     google.maps.event.trigger(this, 'edited');
 }

 // extend CustomPolygon from google.maps.Polygon
 CustomPolygon.prototype = new google.maps.Polygon();
 CustomPolygon.prototype.edit = edit;

 // now you can do 
 var p = new CustomPolygon({ /*options*/
 });
 google.maps.event.addListener(p, 'edited', function () {
     document.body.innerHTML = 'edited!';
 });
 p.edit();

见http://jsfiddle.net/stevejansen/hQZcT/

来源：https://developers.google.com/maps/documentation/javascript/reference#event