Question

我尝试制作代码，我在文档和论坛中搜索了如何动态添加标记到角度为2的Google地图。

查找SebmGoogleMap，它非常易于使用，但没有太多文档或不完整但有很大潜力。

我有一张预定义标记的地图（在地图上始终可见）和ul-li中不同地点的列表。

我尝试的是在点击某处时动态添加标记。如果您单击其他位置，则会刷新最后一个标记。

我试图获取我的组件的当前映射，但它永远不会进入getNativeMap的{{1}}函数（在构造函数方法或GoogleMapsAPIWrapper中都没有）。使用map对象，我可以添加标记并使用DirectionServices函数。但我不明白。我唯一能够实现的是使用预定义标记初始化地图。

这是我目前的代码：

mapPlaces.component.ts：

ngOnInit

mapPlaces.component.html：

[...]
import { MapsAPILoader, SebmGoogleMap, GoogleMapsAPIWrapper} from 'angular2-google-maps/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Component({
  [...]
  styles: [`
    .sebm-google-map-container {
       height: 600px;
     }
  `],
})

export class MapPlacesComponent implements OnInit {

  items: FirebaseListObservable<any[]>;
  map: any;
  lat: number = -12.987637;
  lng: number = -19.97152527;
  zoom: number = 13;

  constructor(
    private _mapsAPI: MapsAPILoader,
    private _mapsAPIWrapper: GoogleMapsAPIWrapper,
    af: AngularFire) {
    // Works fine
    this.items = af.database.list('default_markers');

    this._mapsAPIWrapper.getNativeMap().then( (map) => {
      // Never enter here. I try to get the current map object.
      this.map = map;
      console.log('Current map: ', this.map)
    })
  }

  ngOnInit() {
    [...]
  }

  // Function when onClick in <ul>-<li> in my HTML for view some place.
  retriveExtraMarker(latLon){
     //Try to load the GMaps API to make use of direction service but it does not work.
    this._mapsAPI.load().then( () => {
      var marker = new google.maps.Marker({
        position: latlon,
        map: this.map
      });

      [extra code...]
    } )

  }
}

使用SebmGoogleMap在角度2中添加标记的正确方法是什么？或者还有另一种方法吗？

如何使用SebmGoogleMaps在onClick事件中动态添加标记？ - Angular 2

0 个答案: