Question

我有一个包含Google Maps JS API的Angluar2应用。我像这样加载Google地图：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KE‌Y"> </script>

我在地图上听这样的事件：

this.map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: lat, lng: lng},
  zoom: zoom
});
this.map.addListener('click', () => {
  console.log("Map click");
  this.key++;
});

我在模板中显示密钥：

<div>{{key}}</div>

使用常规功能更新key会立即生效。使用上述功能更新key需要10-20秒才能更新。我可以看到事件在控制台中立即触发。如果我切换标签，例如：My-App - ＆gt;另一页 - ＆gt;回到My-App，价值也会立即更新。

因此，我认为未检测到UI更改并将上述代码更新为：

constructor(private ref: ChangeDetectorRef) {

.... code in between ....

this.map.addListener('click', () => {
  console.log("Map click");
  this.key++;
  this.ref.detectChanges();
});

立即更新key。

为什么Google地图中的事件不会像往常一样立即被识别出来？

BTW：其他事件也会发生这种情况，例如center_change或Marker click。

Answer 1

在Angular2中使用第三方JS库时，您需要确保在Angular的区域（https://medium.com/@MertzAlertz/what-the-hell-is-zone-js-and-why-is-it-in-my-angular-2-6ff28bcf943e#.kumw91vmr）内触发库的事件。

使用Google Maps JS API时，从地图和标记点击触发的事件会在Angular区域之外触发。

有一个名为NgZone的Angular2核心模块可以帮助您解决这个问题。通过导入NgZone模块，然后指定要在区域内运行地图单击事件，可以确保Angular2立即检测到事件：

在地图组件中，导入NgZone：

import { Component, NgZone } from '@angular/core';

在组件的构造函数中，声明NgZone：

constructor(private ref: ChangeDetectorRef, public zone: NgZone) {...}

在标记的点击事件中，在区域的“运行”方法中运行代码：

let me = this;
this.map.addListener('click', () => {
    me.zone.run(() => {
        console.log("Map click");
        this.key++;
        this.ref.detectChanges();
    });
});

Angular2 Google地图活动 - ＆gt; UI更改被延迟，为什么？

1 个答案: