5

mam zmaga się od kilku godzin próbują aby praca GoogleMapsPlaceResult w moim Kątowymi 2 projektu, który używa Angular-cli.kątowa 2 (kątowa-cli): Uncaught ReferenceError: Google nie jest zdefiniowana

Musiałem zainstalować googlemaps używając @types i dodać go pod atrybutem "types" mojego pliku konfiguracyjnego tsconfig.json.

{ 
    ... 
    "types": [ 
     "google-maps" 
    ] 
    } 
} 

Udało mi się użyć google.maps.places.PlaceResult w moim komponencie Angular 2, po prostu go importując!

import { ActivatedRoute, Params } from "@angular/router"; 
import { MapsAPILoader } from "angular2-google-maps/core"; 

import PlaceResult = google.maps.places.PlaceResult; 
import GeocoderRequest = google.maps.GeocoderRequest; 
... 

Kilka godzin później, miałem pracować google.maps.Marker, który jest w tym samym pliku definicji jako PlaceResult i GeocoderRequest. Więc po prostu importowany go jak poniżej:

[Line 12] import PlaceResult = google.maps.places.PlaceResult; 
[Line 13] import GeocoderRequest = google.maps.GeocoderRequest; 
[Line 14] import Marker = google.maps.Marker; 
[Line 15] import LatLng = google.maps.LatLng; 
... 

Ale miałem nieoczekiwany błąd przy starcie mówiąc

Uncaught ReferenceError: google is not defined search.component.ts:14 
at Object.444 (search.component.ts:14) 
at __webpack_require__ (bootstrap 26c2b97…:52) 
at Object.727 (app.config.ts:11) 
at __webpack_require__ (bootstrap 26c2b97…:52) 
at Object.602 (src async:7) 
at __webpack_require__ (bootstrap 26c2b97…:52) 
at Object.1258 (.*$:7) 
at __webpack_require__ (bootstrap 26c2b97…:52) 
at webpackJsonpCallback (bootstrap 26c2b97…:23) 
at main.bundle.js:1  

Uwaga WebPack rzuca ten błąd w linii 14 mojego składnika. Znaczy to (i popraw mnie, jeśli się mylę), poprzednie linie (które używają tego samego "google") działały dobrze.

Czy brakuje czegoś?


używać:

  • kątowe: 2,4
  • skośnych CLI: 1.0.0-beta.24
  • nagranie: 2.0.10
  • angular2-google-maps: 0.17.0

Odpowiedz

1

I rozwiązał problem o następującej konfiguracji:

1- package.json

"dependencies": { 
    ... 
    "googlemaps": "^1.12.0", 
    ... 
    } 

2- tsconfig.json

"types": [ 
     ... 
     "googlemaps" 
    ] 

3- I dodaj skrypt Google Api do mojego index.html

<head> 
    ... 
</head> 
<body> 
    <app-root>Loading...</app-root> 

    <script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places&language=fr" async defer></script> 
</body> 
</html> 

4- W częściach, należy je jak poniżej

declare var google: any; 

@Component({ 
    ... 
}) 
export class SearchComponent implements OnInit, AfterViewInit { 

    // Google Maps 
    bounds: google.maps.LatLngBounds; 
    markers: google.maps.Marker[]; 
    infoWindow: google.maps.InfoWindow; 

}