Google Карти са много полезни за много приложения като,
- Приложение за такси
- Приложение за местоположение на членове на семейството
- Бизнес приложения (за показване на бизнес местоположение)
- SOS приложения
- Приложения за електронна търговия
Има някои налични плъгини за извършване на интегрирането на Google Maps към проект на Ionic Angular, но те имат по-малко функции. С помощта на API на Javascript на Google Maps ще можете да изпълнявате всякакви функции. Следвайте тези инструкции стъпка по стъпка, за да добавите Google Map към вашия Ionic ап.
1) Инсталиране
Импортирайте скрипта за карта в страницата index.html. Тук ще се използва Javascript API на Google Map. Първо трябва да получите ключ за API на Google Карти и да замените YOUR_API_KEY.
index.html
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
2) Настройка на интерфейса на картата
Създайте HTML компонент във вашата страница с карта, за да покажете картата
MapPage.html
<div class="map-div" #gmap></div>
Декларирайте Google Карти на MapPage.ts.Viewchild,AfterViewInit и ElementRef също трябва да бъдат импортирани
MapPage.ts
import { Component, OnInit, ViewChild, ElementRef,AfterViewInit } from '@angular/core'; declare const google: any;
Използвайте Viewchild и Elementref, за да изберете html елемента Map, който създадохме
MapPage.ts
export class MapPage { @ViewChild('gmap') gmap!: ElementRef; myMap:any; }
Трябва да заредим Goole Map след зареждане на всички основни ъглови компоненти.
MapPage.ts
ngAfterViewInit() { this.loadMap() } public loadMap() { let mapOptions = { center: new google.maps.LatLng(37.7833, -122.4167), // Initial camera center of the map zoom: 12, //Camera zoom value mapTypeId: google.maps.MapTypeId.ROADMAP, //Select the Google Map Type disableDefaultUI: true //Disabled the default layout which contains zoom in and out buttons } this.myMap = new google.maps.Map(this.gmap.nativeElement, mapOptions);//'gmap' is the html element }
3) Добавяне на маркер
MapPage.ts
//Adding a marker const marker = new google.maps.Marker({ position: { lat: 35.7833, lng: -120.4167 }, //Latitude and longitude of the marker map: this.myMap });
4) Пълен код
MapPage.ts
import { Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core'; declare const google: any; @Component({ selector: 'map-page', templateUrl: 'mapPage.page.html', styleUrls: ['mapPage.page.scss'] }) export class MapPage implements AfterViewInit{ @ViewChild('gmap') gmap!: ElementRef; myMap: any; constructor() { } ngAfterViewInit() { this.loadMap() } public loadMap() { let mapOptions = { center: new google.maps.LatLng(37.7833, -122.4167), // Initial camera center of the map zoom: 12, //Camera zoom value mapTypeId: google.maps.MapTypeId.ROADMAP, //Select the Google Map Type disableDefaultUI: true //Disabled the default layout which contains zoom in and out buttons } this.myMap = new google.maps.Map(this.gmap.nativeElement, mapOptions);//'gmap' is the html element //Adding a marker const marker = new google.maps.Marker({ position: { lat: 35.7833, lng: -120.4167 }, //Latitude and longitude of the marker map: this.myMap }); } }
да! Добавихме Google Map с маркер. Надяваме се, че това ръководство ви е помогнало и не сте загубили ценното ви време.
Времето е най-ценното нещо за програмиста.