【问题标题】:How To Refresh Google Map In Angular?如何在 Angular 中刷新谷歌地图?
【发布时间】:2020-08-26 16:50:29
【问题描述】:

每次按下更改 lat 和 lng 的“显示”按钮时,我都需要刷新谷歌地图。

我正在为 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>

posts.service:

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

Here's a screenshot of some hardcoded lat and lng values, to show how it should appear.

【问题讨论】:

    标签: javascript angular typescript google-maps


    【解决方案1】:

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

    【讨论】:

    • 我不设置标记也不初始化地图,这是 Angular 的工作。请参阅原始帖子,我附上了一张带有硬编码 lat 和 lng 的照片。
    • 顺便说一句,我正在使用 AGM。
    • 我不知道 AGM 是什么。你也可以分享你的 html 和 PostsService 吗?我使用 Google Maps Javascript API 和 Angularjs 开发了应用程序。我不认为 Angular 对 Google Maps API 的使用会有太大的改变?
    • 我将在一分钟内将这些添加到原始帖子中。
    • 我将用 Google Maps JS Api 替换 AGM,文档似乎更清晰。谢谢楼主!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-25
    • 2013-08-28
    • 1970-01-01
    • 2011-10-04
    相关资源
    最近更新 更多