Добавьте API Карт Google в проект Angular как компонент - PullRequest
Новая
       21

Добавьте API Карт Google в проект Angular как компонент

0 голосов
/ 04 мая 2020

Я пытаюсь добавить Google Map в качестве компонента моего Angular проекта. Я добавил API к index.html следующим образом: 

<body>
  <script src="https://maps.googleapis.com/maps/api/js?key=MY KEY"></script>
  <app-root></app-root>
</body>

И контейнер карты, и кнопка для отображения карты в моем app.component.html следующим образом: 

<button type="button" (click)="open()">Call Map</button>
<div id="map" style="height: 100vh; width: 100vw"></div>

И open работает до app.component.ts следующим образом: 

export class AppComponent {
  open() {
    new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: {
        lat: 0,
        lng: 0,
      },
    });
  }
}

Все хорошо. Я могу открыть карту, когда нажимаю кнопку. Я предполагаю, что из-за асинхронного характера API карты Google каждый раз после компиляции кода в vscode я получаю следующую ошибку:

enter image description here

Do у вас есть какое-либо решение для этого?

Примечание. Я добавил @ type / googlemaps в проект, а Angular Карты Google (AGM) и другие подобные библиотеки не подходят.

1 Ответ

1 голос
/ 04 мая 2020

Добавьте тип googlemaps в tsconfig.app. json

tsconfig.app. json: 

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["googlemaps"]
  },
  "files": ["src/main.ts", "src/polyfills.ts"],
  "include": ["src/**/*.d.ts"]
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...