Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/28.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/google-maps/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 谷歌地图标记标题重复_Angular_Google Maps - Fatal编程技术网

Angular 谷歌地图标记标题重复

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;

我正在开发一款Ionic应用程序。我的应用程序是从美国地质勘探局获取数据,然后在谷歌地图上设置坐标。我在一个数组上循环创建标记。一切正常,但当我点击任何图标标记时,我会得到重复的标题

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(() => {
        //...
    });
}