【发布时间】: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