agm-map 动态 display/updation 标记不起作用
agm-map dynamic display/updation of markers not working
我在 Angular 5 应用程序中使用 Angular Google 地图 (https://angular-maps.com/),还使用 socket.io 轮询纬度和经度从服务器。我能够将数据推送到组件中的数组,但 agm-map 没有得到更新
component.ts
import { Component, OnInit } from '@angular/core';
import { SocketService } from '../../app/services/socket.service';
@Component({
selector: 'app-maps',
templateUrl: './maps.component.html',
styleUrls: ['./maps.component.scss']
})
export class MapsComponent implements OnInit {
public title: string = 'AGM project';
public lat: number = 12.954517;
public lng: number = 77.3507335;
public msg : string;
public mcar =
"https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png";
public agmMarkers: agmmarker[] = [
{
lat: 12.954517,
lng: 77.3507335,
icn: this.mcar
}
];
constructor(private socketService : SocketService) { }
ngOnInit() {
this.socketService
.getMessage()
.subscribe((msg: any) => {
console.log("msg: "+JSON.stringify(msg));
this.updateMarkers(msg);
});
}
public updateMarkers(msg){
this.agmMarkers = [];
for (let entry of msg.stats) {
console.log("entry.latlng.lat: "+entry.latlng.lat);
console.log("entry.latlng.lng: "+entry.latlng.lng);
this.agmMarkers.push({
lat: entry.latlng.lat,
lng: entry.latlng.lng,
icn: this.mcar
});
}
}
}
interface agmmarker {
lat?: number;
lng?: number;
icn?: string;
}
component.html
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker *ngFor="let i of agmMarkers"
[latitude]="i.lat" [longitude]="i.lng" [iconUrl]="i.icn">
</agm-marker>
</agm-map>
我的错。来自服务的响应是字符串格式。
this.agmMarkers.push({
lat: +entry.latlng.lat,
lng: +entry.latlng.lng,
icn: this.mcar
});
类型转换纬度和经度解决了这个问题。
我正在使用@agm/core": "^1.0.0-beta.2
import { MapsAPILoader } from '@agm/core';
export class JovenComponent implements OnInit
{
constructor(public mapsApiLoader: MapsAPILoader) {}
ngOnInit() {
//once you get data from the service this.joven=data
//here data is having all the information
this.mapsApiLoader.load().then(()=>{
this.lat=Number(this.joven.user_residential_address.latitude);
this.lng=Number(this.joven.user_residential_address.longitude);
})
}
}
在HTML
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [disableDefaultUI]="true">
<agm-marker [latitude]="lat" [longitude]="lng">
<agm-info-window>
<strong>{{joven.name}}</strong>
<br/>
<strong>Cidade: {{joven?.user_residential_address?((joven?.user_residential_address?.city!==null)?joven?.user_residential_address?.city:'—'):'—'}}
</strong>
<br/>
<strong>Código de estado: {{joven?.user_residential_address?((joven?.user_residential_address?.stateCode!==null)?joven?.user_residential_address?.stateCode:'—'):'—'}}
</strong>
<br/>
<strong>CEP: {{joven?.user_residential_address?((joven?.user_residential_address?.zipcode!==null)?joven?.user_residential_address?.zipcode:'—'):'—'}}
</strong>
</agm-info-window>
</agm-marker>
</agm-map>
我在 Angular 5 应用程序中使用 Angular Google 地图 (https://angular-maps.com/),还使用 socket.io 轮询纬度和经度从服务器。我能够将数据推送到组件中的数组,但 agm-map 没有得到更新
component.ts
import { Component, OnInit } from '@angular/core';
import { SocketService } from '../../app/services/socket.service';
@Component({
selector: 'app-maps',
templateUrl: './maps.component.html',
styleUrls: ['./maps.component.scss']
})
export class MapsComponent implements OnInit {
public title: string = 'AGM project';
public lat: number = 12.954517;
public lng: number = 77.3507335;
public msg : string;
public mcar =
"https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png";
public agmMarkers: agmmarker[] = [
{
lat: 12.954517,
lng: 77.3507335,
icn: this.mcar
}
];
constructor(private socketService : SocketService) { }
ngOnInit() {
this.socketService
.getMessage()
.subscribe((msg: any) => {
console.log("msg: "+JSON.stringify(msg));
this.updateMarkers(msg);
});
}
public updateMarkers(msg){
this.agmMarkers = [];
for (let entry of msg.stats) {
console.log("entry.latlng.lat: "+entry.latlng.lat);
console.log("entry.latlng.lng: "+entry.latlng.lng);
this.agmMarkers.push({
lat: entry.latlng.lat,
lng: entry.latlng.lng,
icn: this.mcar
});
}
}
}
interface agmmarker {
lat?: number;
lng?: number;
icn?: string;
}
component.html
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker *ngFor="let i of agmMarkers"
[latitude]="i.lat" [longitude]="i.lng" [iconUrl]="i.icn">
</agm-marker>
</agm-map>
我的错。来自服务的响应是字符串格式。
this.agmMarkers.push({
lat: +entry.latlng.lat,
lng: +entry.latlng.lng,
icn: this.mcar
});
类型转换纬度和经度解决了这个问题。
我正在使用@agm/core": "^1.0.0-beta.2
import { MapsAPILoader } from '@agm/core';
export class JovenComponent implements OnInit
{
constructor(public mapsApiLoader: MapsAPILoader) {}
ngOnInit() {
//once you get data from the service this.joven=data
//here data is having all the information
this.mapsApiLoader.load().then(()=>{
this.lat=Number(this.joven.user_residential_address.latitude);
this.lng=Number(this.joven.user_residential_address.longitude);
})
}
}
在HTML
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [disableDefaultUI]="true">
<agm-marker [latitude]="lat" [longitude]="lng">
<agm-info-window>
<strong>{{joven.name}}</strong>
<br/>
<strong>Cidade: {{joven?.user_residential_address?((joven?.user_residential_address?.city!==null)?joven?.user_residential_address?.city:'—'):'—'}}
</strong>
<br/>
<strong>Código de estado: {{joven?.user_residential_address?((joven?.user_residential_address?.stateCode!==null)?joven?.user_residential_address?.stateCode:'—'):'—'}}
</strong>
<br/>
<strong>CEP: {{joven?.user_residential_address?((joven?.user_residential_address?.zipcode!==null)?joven?.user_residential_address?.zipcode:'—'):'—'}}
</strong>
</agm-info-window>
</agm-marker>
</agm-map>