Ionic 4 - Карта Google - Часть 1

Я собираюсь показать, как внедрить карты Google в наше приложение Ionic 4. Нам нужно будет сгенерировать ключ от Google, чтобы использовать Google Maps API.

Создайте новый проект, используя следующую команду CLI.

ionic start GoogleMap blank

Затем добавьте следующий скрипт в раздел заголовка файла index.html тура.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
//Replace your API key here.

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Ionic App</title>

  <base href="/" />

  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />

  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>

<body>
  <app-root></app-root>
</body>

</html>

наконец, ваш файл index.html, подобный этому.

Затем перейдите в каталог домашней страницы. откройте файл home.page.scss. и добавьте следующий код scss.

.map {
  height: 100%;
}

Затем откройте файл home.page.html. Замените содержимое HTML, используя следующий код

<ion-header>
  <ion-toolbar>
    <ion-title>
      Google Map
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <div #mapElement class="map"></div>
</ion-content>

не забудьте создать div для карты. Здесь мы получаем доступ к этому div с помощью ссылочной переменной шаблона и применяем класс.

<div #mapElement class="map"></div>

Откройте файл home.page.ts.

Создайте глобальную переменную для Google, используя следующий код

declare var google;

Затем создайте следующие переменные уровня класса

map;
@ViewChild('mapElement') mapElement;

реализует следующий жизненный цикл на домашней странице

export class HomePage implements OnInit, AfterContentInit {}

напишите следующий код в методе ngAfterContentInit

ngAfterContentInit(): void {
  this.map = new google.maps.Map(
      this.mapElement.nativeElement,
      {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      });
}

home.page.ts

import { AfterContentInit, Component, OnInit, ViewChild} from '@angular/core';
declare var google;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit, AfterContentInit {
  map;
  @ViewChild('mapElement') mapElement;
  constructor() {
  }

  ngOnInit(): void {
  }

  ngAfterContentInit(): void {
    this.map = new google.maps.Map(
        this.mapElement.nativeElement,
        {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
  }
}

запустите свой проект с помощью команды CLI.

Наконец, вы получите такой результат

Ionic 4 - Карта Google - Часть 1 - Простая карта

Вопросы по теме