我开始使用Angular并使用GoogleMaps构建示例应用。
label.baselineAdjustment = .none
所以基本import { Component, Input, OnInit, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormControl } from '@angular/forms';
import Appcomponent = require("../app.component");
import Accident = Appcomponent.Accident;
declare var google: any;
declare let map: any
@Component({
selector: 'app-map',
templateUrl: 'map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
private http: HttpClient;
private baseUrl: string;
private tags: string[];
private accidents: Accident[];
private accidentsMarkers: any[] = [];
private markers: any[] = [];
constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
this.http = http;
this.baseUrl = baseUrl;
}
ngOnInit() {
var mapProp = {
center: new google.maps.LatLng(51.508742, -0.120850),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
public loadAccidents(): void {
this.http.get<Accident[]>(this.baseUrl + 'api/accidents').subscribe(result => {
this.accidents = result;
this.accidents.forEach(function (accident) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(accident.location.coordinates.lat,
accident.location.coordinates.lon),
map: this.map,
title: ""
});
this.markers.push(marker);
});
}, error => console.error(error));
}
}
已在map初始化，当我尝试访问ngOnInit中的map时，我得到：loadAccidents。
据我所知，首先调用构造函数，然后是ngOnInit。因此，我认为，该地图已被定义。
还有其他更好的方法将Google地图集成到Angular应用中吗？或者我做错了什么？
答案 0 :(得分：1)
更改迭代此箭头函数的事件的方式 .i.e。 this.accidents.forEach（accident =＆gt; {...你的代码在这里......}）;
答案 1 :(得分：0)
如果您使用的是Angular 2+，我强烈建议您在应用程序中使用有角度的谷歌地图库，如果附带了许多功能。