Добавление googlemaps в angular-cli

Question

Я пытаюсь реализовать googlemaps в моем проекте angular-cli. Я знаю, что есть компонент «angular2-google-maps» (github), но мне нужны маршруты и другие пользовательские функции.

Я нашел два способа реализации на карту в проект:

1: stackoverflow: с апи загрузчиком Google - но я не мог понять, как инициализируется Google-карты ...

2: с определённым типом google.maps.d.ts. Я установил его с -global (поскольку ambient ist устарел ..) в мой проект и добавил index.d.ts (для глобального) в src/typings.d.ts и может использовать «google.map ..» в .ts файле:

myLatLng = {lat: -25.363, lng: 131.044}; 
    map:any; 

    constructor() { 
    this.map = new google.maps.Map(document.getElementById('map'), { 
     center: this.myLatLng, 
     zoom: 4 
    }); 
    } 

но если построить его с угловой Cli ошибки него: "ReferenceError: Google не определен"

какие-нибудь идеи?

Answer 1

Здесь приводится пошаговое руководство по добавлению компонента google maps в проект angular-cli.

Шаг1: установить google.maps из DefinitelyTyped:

typings i dt~google.maps --global --save 

Шаг2: если у вас есть старые типизации установленные добавить

/// <reference path="../typings/index.d.ts" /> 

своим Src/typings.d.ts

Шаг 3: сгенерировать новый компонент

ng g component google-maps 

Добавьте следующий код:

.ts:

height = '100px'; 
    myLatLng = {lat: -25.363, lng: 131.044}; 
    map:any; 

    constructor(private googleApi:GoogleApiService) {} 

    ngOnInit() { 
    this.googleApi.initMap().then(() => { 

     let latlng = new google.maps.LatLng(this.myLatLng.lat, this.myLatLng.lng); 

     this.map = new google.maps.Map(document.getElementById('map'), { 
     center: latlng, 
     zoom: 4 
     }); 

     new google.maps.Marker({ 
     position: latlng, 
     map: this.map, 
     title: 'Hello World!' 
     }); 
    }); 
    } 

.html:

<div id="map" [style.height]="height"></div> 

Step4: генерировать новый сервис

ng g service google-maps/shared/google-api 

Добавить GoogleApiService + HTTP_PROVIDERS в ЦСИ /main.ts

код:

const API_KEY = '[insert your code]'; 
const url = 'https://maps.googleapis.com/maps/api/js?key='+ API_KEY +'&callback=initMap'; 

@Injectable() 
export class GoogleApiService { 
    private loadMap: Promise<any>; 

    constructor(private http:Http) { 
    this.loadMap = new Promise((resolve) => { 
     window['initMap'] =() => { 
     resolve(); 
     }; 
     this.loadScript() 
    }); 
    } 

    public initMap():Promise<any> { 
    return this.loadMap; 
    } 

    private loadScript() { 
    let script = document.createElement('script'); 
    script.src = url; 
    script.type = 'text/javascript'; 

    if (document.body.contains(script)) { 
     return; 
    } 
    document.getElementsByTagName('head')[0].appendChild(script); 
    } 
} 

Может быть, вам нужно удалить несколько строк из файлов spec.ts. Но тогда вы можете добавить GoogleMapsComponent в качестве директивы.

• это супер легко расширить с маршрутами и т.д. Может быть, если у меня есть время, я загрузить текущую версию моей GoogleMapsComponent на GitHub ..