动态添加标记到谷歌地图 - angular2

时间:2017-09-11 20:06:40

标签: javascript angular google-maps typescript google-maps-api-3

所以我有两个组件,第一个是我用来添加纬度和经度来为标记服务的形式。 我的主要组件是我想要添加标记的地图。 我的第一个问题是我初始化地图并获取ngOnInit()中的数据,因此我无法动态添加新数据,因为组件没有重新加载而OnInit不会再次运行。我的第二个问题是,当我在ngOnInit中初始化地图时,我不知道如何添加新标记。

这是我的主要内容:

export class AppComponent implements OnInit {
  parties: Party[] = [];
  party_location: Location[] = [];

 constructor(private partyService: PartyService) { }

 ngOnInit() {
   map = new google.maps.Map(document.getElementById('map'), {
     center: { lat: -25.363, lng: 131.044 },
     scrollwheel: true,
     zoom: 16
  });

   this.parties = this.partyService.getData(); //get my data

   for (let item of this.parties) { //try to add markers
     let marker = new google.maps.Marker({
      map: map,
      position: { lat: item.lan1, lng: item.lan2 },
      title: item.title
      });
    }

    if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(function(position) {
         let pos = {
         lat: position.coords.latitude,
         lng: position.coords.longitude
       };

       infoWindow.setPosition(pos);
       infoWindow.setContent('This is you.');
       infoWindow.open(map);
       map.setCenter(pos);
     });
    }

    let infoWindow = new google.maps.InfoWindow;

  }
 }

您可能有一些建议如何更改我的代码?

0 个答案:

没有答案