javascript - 如何在 Angular 中刷新谷歌地图?
问题描述
每次按下更改 lat 和 lng 的“显示”按钮时,我都需要刷新谷歌地图。
我正在将 AGM 用于 Google 地图。
在这里,我得到了我想在地图上看到的 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>
帖子服务:
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 变量,但您没有在 onShow 方法中设置它们。您只能从服务中调用 setLat、setLng 方法,但不会更新 lat 和 lng 变量!
推荐阅读
- post - 如何将超过1GB的文件上传到godaddy
- ubuntu - makefile 不在 raspbian 工作,但在 ubuntu 工作
- javascript - 使用 Intl.DateTimeFormat 和 en-US 区域设置,Safari 中的日期显示为 1
- sql - 如何使用 T-SQL 组合多个不同长度的父子关系?
- html - Flexbox:元素折叠——最好的方法?
- angular - IHeaderAngularComp 关于更改参数
- time-complexity - 如何评估大 O 符号的相等性?
- java - NewStringUTF 是否复制传入的 const char *
- javascript - 如何在 React-native 中使导航标题标题动态化?
- node.js - 如何在验证 google id 令牌时指定域名