谷歌地图和angular2的范围问题？

Question

试图让Google地图实现在Angular 2中运行。我想显示一堆由Angular服务提供的标记。

我得到一个“EXCEPTION：TypeError：this.markers在[null]中是未定义的”如果你可以帮助我，这将是非常好的！

感谢 弗雷德

这是我的组件至今：

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); 

      }); 
     } 

    } 

} 

Answer 1

的问题是，您加载标记异步：

ngOnInit(){ 
    this.getDecisionsGeo(); 
    this.initializeMap(); 
} 

所以initializeMap方法的结果之前调用的HTTP请求被接收。

我会重构你的代码是这样的：

ngOnInit(){ 
    this.getDecisionsGeo(); 
} 

getDecisionsGeo() { 
    this._mapService.getDecisionsGeo() 
       .subscribe(
       markers => { 
        this.markers = markers; 
        this.initializeMap(); 
       }, 
       error => this.errorMessage = <any>error);      
}