如何在 Angular 中刷新谷歌地图？

Question

每次按下更改纬度和经度的“显示”按钮时，我都需要刷新谷歌地图。

我在谷歌地图上使用 AGM。

在这里，我得到了我想在地图上看到的纬度和经度：

onShow(_token: string) {
        var find = this.model.find(({ token }) => token === _token);

        this.postsService.setLat(find.lat);
        this.postsService.setLng(find.lng);

        console.log(
            this.postsService.getLat() + '    ' + this.postsService.getLng()
        );
    }

在网页上我有一些位置。 当我按下“显示”按钮时，我想在地图上看到我指向的那个位置。

那是 app.component.ts：

import { Component } from '@angular/core';
import { PostsService } from './posts.service';

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
})
export class AppComponent {
    constructor(public postsService: PostsService) {}

    title = 'Location Project';
    lat: number = this.postsService.getLat();
    lng: number = this.postsService.getLng();
    zoom: number = 12;
}

问题是地图是在未定义 lat 和 lng 的情况下创建的（因此地图显示了海洋中的默认点）。 每次更改 lat 和 lng 值时如何刷新地图？

app.component.html：

<app-header></app-header> <br /><br />

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

<br /><br />

<app-post-list></app-post-list>

邮政服务：

import { Location } from './post.model';
import { Injectable } from '@angular/core';
import { Subject, Observable, Subscription, from } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class PostsService {
    model: Location[] = [];

    constructor() {}

    private lat;
    private lng;

    setLat(lat) {
        this.lat = lat;
    }
    setLng(lng) {
        this.lng = lng;
    }
    getLat() {
        return this.lat;
    }
    getLng() {
        return this.lng;
    }
}

这是一些硬编码的 lat 和 lng 值的屏幕截图，以显示它应该如何显示。

Answer 1

地图标记在哪里设置？ 您必须使用新位置定义标记并将它们设置在地图上。 我认为您正在显示 lat 和 lng 变量，但您没有在 onShow 方法中设置它们。 您只从服务中调用 setLat、setLng 方法，但不更新 lat 和 lng 变量！