Angular2 Google地圖事件 - > UI更改被延遲，爲什麼？

我有一個包含Google Maps JS API的Angluar2應用程序。我打開谷歌地圖這樣的：Angular2 Google地圖事件 - > UI更改被延遲，爲什麼？

<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，使用常規功能在UI中立即生效。使用上述功能更新key需要10-20秒來更新。我可以看到事件在控制檯中立即觸發。如果我切換標籤，例如：我的應用程序 - >另一個頁面 - >回到我的應用程序，該值也會立即更新。

因此，我想，沒有檢測並更新了上面的代碼到用戶界面的變化：

constructor(private ref: ChangeDetectorRef) { 

.... code in between .... 

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

這將更新立即key。

爲什麼Google地圖中的事件不能像往常一樣立即識別？

順便說一句：這也會發生在其他事件中，例如center_change或標記點擊。

來源

2017-01-02 Robin

vanila ggooogle地圖？ –

由於沒有官方的支持谷歌地圖的Angular2軟件包，我只是使用以下代碼加載它：'。更新我的問題。 – Robin

將這個腳本放在頭部 –

在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(); 
    }); 
});

來源

2017-03-24 14:25:58 alexabbott

Angular2 Google地圖事件 - > UI更改被延遲，爲什麼？

回答

相關問題