Angular 谷歌地图标记标题重复
我正在开发一款Ionic应用程序。我的应用程序是从美国地质勘探局获取数据,然后在谷歌地图上设置坐标。我在一个数组上循环创建标记。一切正常,但当我点击任何图标标记时,我会得到重复的标题Angular 谷歌地图标记标题重复,angular,google-maps,Angular,Google Maps,我正在开发一款Ionic应用程序。我的应用程序是从美国地质勘探局获取数据,然后在谷歌地图上设置坐标。我在一个数组上循环创建标记。一切正常,但当我点击任何图标标记时,我会得到重复的标题 export class HomePage implements OnInit { protected points: { lng: number, lat: number }[] = []; items: any pet: string = "Today"; map: GoogleMap;
export class HomePage implements OnInit {
protected points: { lng: number, lat: number }[] = [];
items: any
pet: string = "Today";
map: GoogleMap;
mags: number;
constructor(
private http: HTTP) {
}
async ngOnInit() {
this.getData()
}
async getData() {
this.http.get(`https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson`, {}, {}).then(data => {
this.items = JSON.parse(data.data)
let earth = JSON.parse(data.data)
console.log(this.items)
for (let datas of earth['features']) {
this.points.push({ lng: datas.geometry.coordinates[0], lat: datas.geometry.coordinates[1] });
let mag = datas.properties.place
let title = datas.properties.title
/// Marker icon
let dest = this.points.map((coords) => {
return this.map.addMarker({
position: coords,
icon: this.mags_icons
title : title
}).then((marker: Marker) => {
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
});
});
});
this.map = GoogleMaps.create('map_canvas');
}
})
}
}
标记实例化的方式看起来不正确,因为每次迭代功能集合时,都会重新创建预览标记(这就是为什么
title
引用相同的值的原因)
给定该示例,以下示例演示如何创建标记并设置title
以引用适当的功能属性:
getData() {
this.http
.get(
`https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson`,{},{}
)
.then(data => {
let geojson = JSON.parse(data.data);
for (let feature of geojson["features"]) {
let markerProps = {
title: feature.properties.title,
position: {
lng: feature.geometry.coordinates[0],
lat: feature.geometry.coordinates[1]
}
};
let marker = this.map.addMarker(markerProps).then(marker => {
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
//...
});
});
}
});
}
另一种选择是利用map.addMarkerSync
功能:
let geojson = JSON.parse(data.data);
for (let feature of geojson["features"]) {
let markerProps = {
title: feature.properties.title,
position: {
lng: feature.geometry.coordinates[0],
lat: feature.geometry.coordinates[1]
}
};
let marker = this.map.addMarkerSync(markerProps);
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
//...
});
}