Google지도 요청 센터 설정

Question

나는 primeng에서 행 선택에 제공 한 좌표로지도 중심을 설정하려고합니다. this.options는 OnInit에서 작동하지만 showCords() 함수에서 동일한 작업을 요청하거나 수행 할 때 작동하지 않습니다. 내 코드는 아래와 같습니다 :

gmap.component.ts

import {Component, OnInit} from '@angular/core'; 
import {Message} from '../message'; 
import {AppService} from '../app.service'; 
import {Map} from './map'; 

declare var google: any; 

@Component({ 
    templateUrl: '/app/gmaps/gmap.component.html' 
}) 

export class GMapComponent implements OnInit { 

    options: any; 
    selectedCord: Map[]; 
    map: Map = new PrimeCord(); 
    overlays: any[]; 

    dialogVisible: boolean; 

    markerTitle: string; 

    selectedPosition: any; 

    infoWindow: any; 
    selMap: boolean; 
    draggable: boolean; 

    msgs: Message[] = []; 

    maps: Map[]; 

    constructor(private _appService: AppService) { } 

    ngOnInit() { 
     this.options = { 
      center: { lat: 31.531259, lng: 74.352743 }, 
      zoom: 12 
     }; 

     this.initOverlays(); 

     this.infoWindow = new google.maps.InfoWindow(); 
    } 

    handleMapClick(event) { 
     this.dialogVisible = true; 
     this.selectedPosition = event.latLng; 
    } 

    handleOverlayClick(event) { 
     this.msgs = []; 
     let isMarker = event.overlay.getTitle != undefined; 

     if (isMarker) { 
      let title = event.overlay.getTitle(); 
      this.infoWindow.setContent('<div>' + title + '</div>'); 
      this.infoWindow.open(event.map, event.overlay); 
      event.map.setCenter(event.overlay.getPosition()); 

      this.msgs.push({ severity: 'info', summary: 'Marker Selected', detail: title }); 
     } 
     else { 
      this.msgs.push({ severity: 'info', summary: 'Shape Selected', detail: '' }); 
     } 
    } 

    addMarker() { 
     this.overlays.push(new google.maps.Marker({ 
      position: { 
       lat: this.selectedPosition.lat(), 
       lng: this.selectedPosition.lng() 
      }, 
      title: this.markerTitle, 
      draggable: this.draggable 
     })); 

     this.dialogVisible = false; 
    } 

    saveMarker(lat: number, lng: number) { 
     debugger; 
     this._appService.postCords(lat, lng, this.markerTitle).subscribe(
      error => console.log(error) 
     ); 
     this.markerTitle = null; 
    } 

    handleDragEnd(event) { 
     this.msgs = []; 
     this.msgs.push({ severity: 'info', summary: 'Marker Dragged', detail: event.overlay.getTitle() }); 
    } 

    initOverlays() { 
     this._appService.getCords().subscribe(
      res => this.maps = res 
     ); 

     if (!this.overlays || !this.overlays.length) { 
      this.overlays = [ 
       new google.maps.Marker({ position: { lat: 31.531259, lng: 74.352743 }, title: "Siddiq Trade Centre" }), 
       new google.maps.Marker({ position: { lat: 31.506739, lng: 74.384500 }, title: "Home" }), 
       new google.maps.Marker({ position: { lat: 31.528251, lng: 74.402332 }, title: "Allama Iqbal International Airport" }), 

      ]; 
     } 
    } 

    zoomIn(map) { 
     map.setZoom(map.getZoom() + 1); 
    } 

    zoomOut(map) { 
     map.setZoom(map.getZoom() - 1); 
    } 

    clear() { 
     this.overlays = []; 
    } 


    onRowSelect(event) { 
     debugger; 
     this.selMap = true; 
     this.map = this.cloneMap(event.data); 

     this.showCords(); 
    } 

    cloneMap(m: Map): Map { 
     let map = new PrimeCord(); 
     for (let prop in m) { 
      map[prop] = m[prop]; 
     } 
     return map; 
    } 

    showCords() { 
     this.overlays.push(new google.maps.Marker({ 
      position: { 
       lat: this.map.lat, 
       lng: this.map.lng 
      }, 
      title: this.map.title 
     })); 
     this.options = { 
      center: { lat: this.map.lat, lng: this.map.lng }, 
      zoom: 15 
     } 
    } 
} 

class PrimeCord implements Map { 
    constructor(public title?, public lat?, public lng?) { } 
} 

gmap.component.html

<div class="ContentSideSections Implementation"> 
    <p-growl [value]="msgs"></p-growl> 

    <p-gmap #gmap [style]="&#123;'width':'100%','height':'320px'&#125;" [options]="options" [overlays]="overlays" 
      (onMapClick)="handleMapClick($event)" (onOverlayClick)="handleOverlayClick($event)" (onOverlayDragEnd)="handleDragEnd($event)"></p-gmap> 
    <button type="button" pButton label="Clear" icon="fa-close" (click)="clear()" style="margin-top:10px"></button> 
    <button type="button" pButton label="Reset" icon="fa-map-marker" (click)="initOverlays()" style="margin-top:10px"></button> 
    <button type="button" pButton label="Zoom In" icon="fa-search-plus" (click)="zoomIn(gmap.getMap())" style="margin-top:10px"></button> 
    <button type="button" pButton label="Zoom Out" icon="fa-search-minus" (click)="zoomOut(gmap.getMap())" style="margin-top:10px"></button> 
    <p-dialog showEffect="fade" [(visible)]="dialogVisible" header="New Location"> 
     <div class="ui-grid ui-grid-pad ui-fluid" *ngIf="selectedPosition"> 
      <div class="ui-grid-row"> 
       <div class="ui-grid-col-2"><label for="title">Label</label></div> 
       <div class="ui-grid-col-10"><input type="text" pInputText id="title" [(ngModel)]="markerTitle"></div> 
      </div> 
      <div class="ui-grid-row"> 
       <div class="ui-grid-col-2"><label for="lat">Lat</label></div> 
       <div class="ui-grid-col-10"><input id="lat" type="text" readonly pInputText [ngModel]="selectedPosition.lat()" ngDefaultControl></div> 
      </div> 
      <div class="ui-grid-row"> 
       <div class="ui-grid-col-2"><label for="lng">Lng</label></div> 
       <div class="ui-grid-col-10"><input id="lng" type="text" readonly pInputText [ngModel]="selectedPosition.lng()" ngDefaultControl></div> 
      </div> 
      <div class="ui-grid-row"> 
       <div class="ui-grid-col-2"><label for="drg">Drag</label></div> 
       <div class="ui-grid-col-10"><p-checkbox [(ngModel)]="draggable" ngDefaultControl></p-checkbox></div> 
      </div> 
     </div> 
     <footer> 
      <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> 
       <button type="button" pButton label="Add Marker" icon="fa-plus" (click)="addMarker(); saveMarker(selectedPosition.lat(), selectedPosition.lng());"></button> 
      </div> 
     </footer> 
    </p-dialog> 
</div> 
<div *ngIf="selMap"> 
    <h3>Title: {{map.title}}</h3> 
    <h3>Latitude: {{map.lat}}</h3> 
    <h3>Longitude: {{map.lng}}</h3> 
</div> 
<div> 
    <p-dataTable [value]="maps" selectionMode="single" [(selection)]="selectedCord" 
       (onRowSelect)="onRowSelect($event)" 
       [paginator]="true" rows="15" [responsive]="true"> 
     <header>Record</header> 
     <p-column field="title" header="Title" [sortable]="true"></p-column> 
     <p-column field="lat" header="Latitude" [sortable]="true"></p-column> 
     <p-column field="lng" header="Longitude" [sortable]="true"></p-column> 
    </p-dataTable> 
</div> 

Answer 1

이 하나를 시도 ..

<p-gmap #gmap [style]="&#123;'width':'100%','height':'320px'&#125;" *ngIf="options.center" [options]="options" [overlays]="overlays" 
     (onMapClick)="handleMapClick($event)" (onOverlayClick)="handleOverlayClick($event)" (onOverlayDragEnd)="handleDragEnd($event)"></p-gmap>