如何将自定义库事件（即 Google 地图事件）转换为 RxJS 中的 Observable 流？答案

【问题标题】：How to convert custom library events (ie. Google Maps events) into Observable stream in RxJS?如何将自定义库事件（即 Google 地图事件）转换为 RxJS 中的 Observable 流？
【发布时间】：2017-03-10 20:59:24
【问题描述】：

我想从 Google Map 事件创建一个 RxJS 可观察流。我知道如何从本机浏览器事件中执行此操作，如下所示：

var result = document.getElementById('result');

var source = Rx.Observable.fromEvent(document, 'mousemove');

var subscription = source.subscribe(function (e) {
  result.innerHTML = e.clientX + ', ' + e.clientY;
});

mousemove 是一个浏览器事件，这让我相信.fromEvent() 将mousemove 识别为硬编码默认值。但是，如果我想识别自定义事件，如何创建可观察流？以谷歌地图为例：

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363, lng: 131.044}
  });

  map.addListener('center_changed', function() {
    var center = map.getCenter()
    console.log(center)
  });

我之所以要将这些 google map 事件转换为 observable 流，是为了可以使用 RxJS debounce 来提高性能。这样center_changed 只能分批识别（而不是在 2 秒内触发 10 次，它只识别同一 2 秒内的最后 1 次）。我的困境是将自定义的 Google Maps 事件转换为可观察的流。也许有一种简单的方法可以不断地添加到 observable，但是从我的搜索中我还没有找到如何做到这一点。

非常感谢您在这件事上的帮助！

【问题讨论】：

标签： javascript google-maps rxjs reactive-programming dom-events

【解决方案1】：

您应该可以使用fromEventPattern 做您想做的事：

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: { lat: -25.363, lng: 131.044 }
});

var source = Rx.Observable.fromEventPattern(
    function (handler) {
        return map.addListener('center_changed', handler);
    },
    function (handler, listener) {
        google.maps.event.removeListener(listener);
    }
);
source.subscribe(function () {
    console.log(map.getCenter());
});

fromEventPattern 允许您提供添加和删除实现，因此很容易从大多数类型的“自定义”事件机制中获取 observable。请注意，添加处理程序返回的值作为第二个参数传递给删除处理程序。在这种情况下，它是侦听器 - 这是删除 Google 地图事件侦听器时所需要的。

【讨论】：