Jak mogę zintegrować Google Maps API wewnątrz kątowym 2 komponentu

mam kątowym 2 komponent, który jest zdefiniowany w comp.ts plików w ten sposób tak:Jak mogę zintegrować Google Maps API wewnątrz kątowym 2 komponentu

import {Component} from 'angular2/core'; 

@component({ 
    selector:'my-comp', 
    templateUrl:'comp.html' 
}) 

export class MyComp{ 
    constructor(){ 
    } 
}

Bo chcę pokazać komponent mapa google, mam wstawiony w pliku comp.html następującego kodu:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://maps.googleapis.com/maps/api/js"></script> 
<script> 
function initialize() { 
    var mapProp = { 
    center:new google.maps.LatLng(51.508742,-0.120850), 
    zoom:5, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 
    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 

<body> 
<div id="googleMap" style="width:500px;height:380px;"></div> 
</body> 

</html>

Ten kod został skopiowany z tego linku http://www.w3schools.com/googleAPI/google_maps_basic.asp. Problem polega na tym, że komponent nie wyświetla mapy. Co zrobiłem źle?

Źródło

2016-05-19 nix86

Znalazłem rozwiązanie. Przede wszystkim w pliku index.html należy wstawić wiersz:

<script src="http://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]"></script>

. Kod tworzący mapę musi zostać wstawiony do pliku comp.ts. W szczególności musi być wstawiony w specjalną metodę, a mianowicie "ngOnInit", która może być pozycjonowana po konstruktorze klasy. To comp.ts:

import { Component } from 'angular2/core'; 

declare const google: any; 

@Component({ 
    selector: 'my-app', 
    templateUrl:'appHtml/app.html', 
    styleUrls: ['css/app.css'] 
}) 

export class AppMainComponent { 
    constructor() {} 
    ngOnInit() { 
     let mapProp = { 
      center: new google.maps.LatLng(51.508742, -0.120850), 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     let map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
    } 
}

Wreszcie div o identyfikatorze „kalkulacji”, który będzie zawierać mapy Google, należy umieścić w pliku comp.html, który będzie wyglądać następująco:

<body> 
    <div id="googleMap" style="width:500px;height:380px;"></div> 
</body>

Źródło

2016-05-20 12:44:36 nix86

należy umieścić element, który ma swoją mapa wyświetlana w szablonie html do swojego komponentu. Tylko dla wyjaśnienia. Zwykle nie masz znaczników ciała w szablonie. – thomi

Tego rodzaju rozwiązanie działa również w Angular 5.x. Świetna odpowiedź, dzięki! Jeśli używasz tego w tej wersji, możesz potrzebować 'npm install @ types/googlemaps --save'. – tkhm

Tak, możesz to zrobić. Ale wystąpiłby błąd w kompilatorze maszynopisów, więc nie zapomnij o niejawnej deklaracji zmiennej google.

declare var google: any;

dodaj tę dyrektywę zaraz po importowaniu komponentu.

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

@Component({ 
    moduleId: module.id, 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'] 
}) 
export class AppComponent implements OnInit { 
    ngOnInit() { 
    var mapProp = { 
      center: new google.maps.LatLng(51.508742, -0.120850), 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("gmap"), mapProp); 
    } 
}

Źródło

2016-08-07 09:33:57

The ngOnInit pomógł mi rozwiązać problem getElementById, który miałem dzięki! jak w deklaracji google var, sugeruję użycie [typowania GMaps] (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/googlemaps/google.maps.d.ts) pomaga to naprawdę dobrze – youssef

-4

Stosować angular2-google-maps: https://angular-maps.com/

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule, ApplicationRef } from '@angular/core'; 

import { AgmCoreModule } from 'angular2-google-maps/core'; 

@Component({ 
    selector: 'app-root', 
    styles: [` 
     .sebm-google-map-container { 
      height: 300px; 
     } 
    `], 
    template: ` 
     <sebm-google-map [latitude]="lat" [longitude]="lng"></sebm-google-map> 
    ` 
}) 
export class AppComponent { 
    lat: number = 51.678418; 
    lng: number = 7.809007; 
} 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    AgmCoreModule.forRoot({ 
     apiKey: 'YOUR_GOOGLE_MAPS_API_KEY' 
    }) 
    ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule {}

Źródło

2016-11-18 01:35:32 nisenish

Jak mogę zintegrować Google Maps API wewnątrz kątowym 2 komponentu

Odpowiedz

Powiązane problemy