Der Versuch, die Google Maps-Implementierung in Angular 2 zu starten. Ich möchte eine Reihe von Markierungen anzeigen, die von einem Angular-Dienst bereitgestellt werden.Scope Problem mit Google Maps und angular2?
Ich bekomme eine "AUSNAHME: TypeError: this.markers ist undefined in [null]" Es wäre toll, wenn Sie mir dabei helfen können!
Dank Fred
Das ist meine Komponente so weit:
ngOnInit(){
this.getDecisionsGeo();
this.initializeMap();
}
So ist die initializeMap
Verfahren vor dem Ergebnis aufgerufen:
import { Component, OnInit, provide } from 'angular2/core';
import { Router } from 'angular2/router';
import { Marker } from './marker';
import { MapService } from './map.service';
@Component({
selector: 'my-map',
providers: [MapService],
templateUrl: 'app/map/map.component.html',
styleUrls: ['app/map/map.component.css'],
})
export class MapComponent implements OnInit {
markers: Marker[];
errorMessage: string;
constructor(
private _mapService: MapService
) { }
getDecisionsGeo() {
this._mapService.getDecisionsGeo()
.subscribe(
markers => this.markers = markers,
error => this.errorMessage = <any>error);
}
ngOnInit(){
this.getDecisionsGeo();
this.initializeMap();
}
initializeMap() {
// Giving the map some options
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(51.2192,4.4029)
};
// Creating the map
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Looping through all the entries from the markers data
for(var i = 0; i < this.markers.length; i++) {
// Current object
var obj = this.markers[i];
// Adding a new marker for the object
var marker = new google.maps.Marker({
position: new google.maps.LatLng(obj.lat,obj.lng),
map: map,
title: obj.poi.documents.meetitem_title_pop // this works, giving the marker a title with the correct title
});
// Adding a new info window for the object
var clicker = addClicker(marker, obj.poi.documents.meetitem_title_pop);
} // end loop
// Adding a new click event listener for the object
function addClicker(marker, content) {
var infowindow;
google.maps.event.addListener(marker, 'click', function() {
if (infowindow) {infowindow.close();}
infowindow = new google.maps.InfoWindow({content: content});
infowindow.open(map, marker);
});
}
}
}
Thierry, Ihr Vorschlag die Karte bekam und läuft:
würde ich Ihren Code auf diese Weise umgestalten! Beenden :). Noch nicht ganz klar, wie dein Vorschlag funktioniert. Werden Methoden im NgOnit synchron aufgerufen? Ich dachte, sie würden sequentiell von oben nach unten ausführen. Danke, dass du das erklärt hast. – Fred30
Gern geschehen! Tatsächlich ist der erste Anruf asynchron. Dies bedeutet, dass die Liste der Markierungen später empfangen wird (nachdem die "initializeMap" aufgerufen wurde). Sie müssen warten, bis die Daten empfangen werden (innerhalb des 'subscribe' Callbacks) ... –