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

试试这个..

firebase.auth().createUserWithEmailAndPassword(user.email, user.password)
   .then(function(response) {
      console.log(response.uid);

      firebase.database().ref("users/"+response.uid).set({
         email: user.email,
         displayName: user.displayname
      });
});

Google地图根据要求设置了中心

1 个答案: