如果我对数据进行硬编码,那么所有标记都会很好地显示。如果我评论该行 this.markers.push(newMarker);并将其替换为下一个,我得到一个 ERROR TypeError: Cannot read property 'push' of undefine
如果我使用 this.markers = [newMarkers] 只有最后一个 json 元素显示为标记。
如何一次显示所有标记,这是异步问题吗?
ngOnInit() {
this._mapService.getMarkers().subscribe(data => {
data.map(a => {
const lat = a.lat;
const lng = a.lng;
const name = a.name;
const newMarker = marker(
[lat, lng], {
icon: icon({
iconSize: [25, 25],
iconAnchor: [13, 41],
iconUrl: 'assets/yellow.png',
})
}
);
newMarker.bindPopup('<p>' + name + '</p>', {autoPan: true});
// this.markers.push(newMarker);
this.markers = [newMarker];
});
服务
@Injectable({
providedIn: 'root'
})
export class MapserviceService {
private _markers = '../../assets/markers/markers.json';
constructor(private http: HttpClient) {}
getMarkers(): Observable<any> {
return this.http.get<any>(this._markers);
}
JSON 数据
[{
"name": "Canada",
"lat": 56.130366,
"lng": -106.346771
},
...
{
"name": "Anguilla",
"lat": 18.220554,
"lng": -63.068615
}
]
有效的硬编码数据
function createIcon2() {
return icon({
iconSize: [25, 25],
iconAnchor: [13, 41],
iconUrl: 'assets/yellow.png',
});
}
this.markers =
[
marker([35, -76], { icon: createIcon2() }),
marker([36, -81], { icon: createIcon2() }),
marker([37, -88], { icon: createIcon2() }),
marker([38, -99], { icon: createIcon2() }),
marker([39, -111], { icon: createIcon2() })
];
console.log('working', this.markers);
最佳答案
公共(public)标记:Marker[];
声明您的markers
成员,但不会初始化/为其分配任何内容。
: Markers[]
部分用于 TypeScript 类型声明,但不会初始化。
公共(public)标记:Marker[] = []
会将其初始化为一个数组,您可以在该数组上使用 push
方法。
关于javascript - 我的服务仅在我的 ngx 传单 map 上显示最后一个 json 元素标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51355193/