Javascript 如何在Angular中刷新Google地图？

我需要刷新谷歌地图每次我按下“显示”按钮，改变纬度和液化天然气

我正在用AGM制作谷歌地图

这是我想要在地图上看到的lat和lng：

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>

---

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

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

我不设置标记也不初始化地图，那是Angular的工作。看到原来的帖子，我附上了一张带有硬编码lat和lng的照片。顺便说一下，我用的是AGM。我不知道什么是AGM。你能分享你的html和PostsService吗？我使用谷歌地图Javascript API和Angularjs开发了应用程序。我不认为Google Maps API的使用会随着Angular发生太大的变化？我会在一分钟内将这些添加到原始帖子中。我将用Google Maps JS API替换AGM，文档看起来更清晰。谢谢你，先生！我不设置标记也不初始化地图，那是Angular的工作。看到原来的帖子，我附上了一张带有硬编码lat和lng的照片。顺便说一下，我用的是AGM。我不知道什么是AGM。你能分享你的html和PostsService吗？我使用谷歌地图Javascript API和Angularjs开发了应用程序。我不认为Google Maps API的使用会随着Angular发生太大的变化？我会在一分钟内将这些添加到原始帖子中。我将用Google Maps JS API替换AGM，文档看起来更清晰。谢谢你，先生！

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