クリックするとGoogleマップにマーカーが追加されます。角度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

幸い、angular-mapsが提供するplunkerの例では、正確な機能は既に実装ことがあります。

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