angular2 嵌入谷歌地圖

Question

我想在不使用 angular2-google-maps 組件的情況下將谷歌地圖集成到我的應用程序中。 我嘗試按照入門教程進行操作

谷歌地圖 - 你好世界

當我將教程中的兩個腳本放在 index.html 文件中並創建一個地圖組件時，它基本上只鏈接到一個帶有<div id="map"></div>標簽的 html 文件，我得到了以下錯誤：

TypeError: Cannot read property 'offsetWidth' of null.

這可能是由於在加載實際 div 之前執行了腳本。 如何在所有元素加載后執行這些腳本？ 將腳本添加到我的地圖組件的 html 部分似乎不起作用。

謝謝！

Answer 1

嘗試從 google maps 腳本標簽中刪除 async 屬性。 如果還是不行，可以試試這個同步加載

祝你好運。

Answer 2

您可以嘗試使用讓 jQuery 與 Angular 2 一起運行的相同方法。

使用setTimeout ：這讓 jQuery 在 Angular 完成加載所有子組件后的下一個執行周期中運行。

export class HomePage {

constructor() {
    setTimeout(() => {

   // your code here 

    }, 0);
}
}

Answer 3

你可以試試AGM或者@ angular/google-maps

我個人更喜歡第二個選項，但兩個鏈接都很好地解釋了如何在 angular 應用程序中實現 gmap。