添加标记到谷歌地图当点击角2

Question

我想建立一个角2应用程序，当我点击我的地图时添加一个标记。 这是我的代码：

<sebm-google-map (mapClick)="getPosition($event)" [latitude]="lat" [longitude]="lng" [zoom]="zoom" [backgroundColor]="backgroundColor" style="margin-bottom:900px"> 
    <sebm-google-map-marker *ngFor=" let post of posts" [latitude]="post.lapti" [longitude]="post.longi" ></sebm-google-map-marker> 
</sebm-google-map> 

任何解决方案？

Answer 1

幸运的是，plunker例子angular-maps提供有实现的具体功能已经：

plunker：http://plnkr.co/edit/YX7W20?p=preview

这里是一个静态副本，以防该plunker不再存在：

@Component({ 
    selector: 'my-app', 
    styles: [` 
    .sebm-google-map-container { 
     height: 300px; 
    } 
    `], 
    template: ` 
    <sebm-google-map 
     [latitude]="lat" 
     [longitude]="lng" 
     [zoom]="zoom" 
     [disableDefaultUI]="false" 
     [zoomControl]="false" 
     (mapClick)="mapClicked($event)"> 

     <sebm-google-map-marker 
      *ngFor="let m of markers; let i = index" 
      (markerClick)="clickedMarker(m.label, i)" 
      [latitude]="m.lat" 
      [longitude]="m.lng" 
      [label]="m.label" 
      [markerDraggable]="m.draggable" 
      (dragEnd)="markerDragEnd(m, $event)"> 

     <sebm-google-map-info-window> 
      <strong>InfoWindow content</strong> 
     </sebm-google-map-info-window> 

     </sebm-google-map-marker> 

     <sebm-google-map-circle [latitude]="lat + 0.3" [longitude]="lng" 
      [radius]="5000" 
      [fillColor]="'red'" 
      [circleDraggable]="true" 
      [editable]="true"> 
     </sebm-google-map-circle> 

    </sebm-google-map> 
`}) 
export class App { 
    // google maps zoom level 
    zoom: number = 8; 

    // initial center position for the map 
    lat: number = 51.673858; 
    lng: number = 7.815982; 

    clickedMarker(label: string, index: number) { 
    console.log(`clicked the marker: ${label || index}`) 
    } 

    mapClicked($event: MouseEvent) { 
    this.markers.push({ 
     lat: $event.coords.lat, 
     lng: $event.coords.lng 
    }); 
    } 

    markerDragEnd(m: marker, $event: MouseEvent) { 
    console.log('dragEnd', m, $event); 
    } 

    markers: marker[] = [ 
     { 
      lat: 51.673858, 
      lng: 7.815982, 
      label: 'A', 
      draggable: true 
     }, 
     { 
      lat: 51.373858, 
      lng: 7.215982, 
      label: 'B', 
      draggable: false 
     }, 
     { 
      lat: 51.723858, 
      lng: 7.895982, 
      label: 'C', 
      draggable: true 
     } 
    ] 
} 
// just an interface for type safety. 
interface marker { 
    lat: number; 
    lng: number; 
    label?: string; 
    draggable: boolean; 
}