Question

尝试使用离子原生谷歌地图插件在谷歌地图上显示我的json文件中的所有位置：

我有一个包含数据的单独提供者，我想用于循环并加载所有标记，json示例：

＆＃34;地点＆＃34;：[

    {
        "title": "Kerek-tó",
        "latitude": 47.800618,
        "longitude": 18.806419
    },

export class TerkepPage {
  map:GoogleMap;
  lat:any; lang:any;
  constructor(public locations: HelyekProvider,private toastCtrl: ToastController,private plt: Platform,private geolocation: Geolocation, public navCtrl: NavController) {

    this.plt.ready().then(()=>{
      var options={timeout: 15000};

      this.geolocation.getCurrentPosition(options).then(resp=>{
        this.lat=resp.coords.latitude;
        this.lang=resp.coords.longitude;
        this.loadGoogleMap();
      }).catch(()=>{
        console.log("sikertelen location");
        this.lat=47.49801;
        this.lang=19.03991;
        this.loadGoogleMap();
        this.presentToast();
      });

    });
  }  
  ionViewDidLoad(){

  }
  presentToast() {
    let toast = this.toastCtrl.create({
      message: 'A helyadatok lekérdezése nem sikerült! Budapest lett megjelölve!',
      duration: 3000,
      position: 'bottom',
      showCloseButton: true,
      closeButtonText: "OK",


    });
    toast.present();
  }
  loadGoogleMap(){
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: this.lat,
          lng: this.lang
        },
        zoom: 10,
        tilt: 30
      }
    };
    let map = GoogleMaps.create('map_canvas', mapOptions);    
    let locationsLoaded = this.locations.load();
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {

        this.map.addMarker({

            title: 'Jelenlegi helyzet',
            icon: 'yellow',
            animation: 'DROP',
            position: {
              lat: this.lat,
              lng: this.lang
            }
          })
          .then(marker => {
            marker.on(GoogleMapsEvent.MARKER_CLICK)
              .subscribe(() => {

              });
          });

      });
  }

我正在加载的提供商：

load(){

        if(this.data){
            return Promise.resolve(this.data);
        }

        return new Promise(resolve => {

            this.http.get('assets/data/locations.json').map(res => res.json()).subscribe(data => {

                this.data = this.applyHaversine(data.locations);

                this.data.sort((locationA, locationB) => {
                    return locationA.distance - locationB.distance;
                });

                resolve(this.data);
            });

        });

    }

有人可以帮助我在json文件中添加标题所有这些标记吗？

Answer 1

如果您使用的是agm-core模块，则可以使用ngFor进行如下操作，

   <agm-map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982">
  <agm-marker>
    <agm-marker *ngFor="let marker of locations" [latitude]="marker.latitude" [longitude]="marker.longitude"></agm-marker>
  </agm-marker>

<强> DEMO STACKBLITZ

使用Google地图从json文件加载位置

1 个答案: