google-maps - 如何在 ionic 3 中为谷歌地图信息卡添加 slider

Question

我对 ionic 框架很陌生。我想在 slider 形式的信息卡中添加多个标记，就像附带的图像一样。
我能够在 map 中添加多个标记，但不知道如何添加将激活标记的信息 slider 。对应于 slider 。
任何人都可以给我一些关于如何使用它的提示。

我的 eventmap.ts 文件显示多个标记

export class EventMapPage {
    public userToken:any;
    public userPostData = {"api_token":""};
    public responseData:any;
    public dataSet:any;



    @ViewChild('map') mapRef:ElementRef;

  constructor(...) {
      this.getEvents().then(result=> {
          this.responseData = result;
          this.DisplayMap(this.responseData);
      });

  }

     //Get all the available events
    getEvents(){
        const data = localStorage.getItem('userToken');
        this.userPostData.api_token= data;
        return this.authService.postData(this.userPostData,'events');
    }

    //Initializing the map


  DisplayMap(data) {
this.geolocation.getCurrentPosition().then((resp) => {
   const location = new google.maps.LatLng(resp.coords.latitude,
     resp.coords.longitude);
   const options = {
     center:location,
     zoom:10,
     mapTypeControl: false,
     streetViewControl:false,
   };
     const map = new google.maps.Map(this.mapRef.nativeElement,options);
     //Loop the markers
       if(data != null){
         for(var i=0; i<data.length; i++){
           this.multipleMaker(parseFloat(data[i].lat),parseFloat(data[i].lon),map);
         }
       }
    }).catch((error) => {
      console.log('Error getting location', error);
    });

  }

  //Marker function
 multipleMaker(lat,lng,map) {
    return new google.maps.Marker({
        position:{lat:lat,lng:lng},
        map:map
    });
}


}

Answer 1

在经历了一些错误之后，我在谷歌上进行了研究，我终于弄明白了。

我想出的解决方案如下

在 map.html 中

<ion-content >
  <div #map id="map">
  </div>

  <div  class="slider-wraper">
    <ion-slides slidesPerView="1" (ionSlideDidChange)="slideChanged()">
      <ion-slide *ngFor="let item of responseData?.weekEvents">
        <ion-card tappable (click)="viewDetail(item.id)">
          <div class="event-image-holder search-list">
            <img src="http://localhost:8000/{{item.photo_url}}"/>
          </div>
          <ion-card-content>
            <div class="event-info">
              <div class="event-descp">
                <h2>{{item.title}}</h2>
                <p>
                  {{item.club.name}}
                </p>
                <p>
                  <strong>{{item.attendees.length}} are going</strong>
                </p>
              </div>
            </div>
          </ion-card-content>
        </ion-card>
      </ion-slide>
    </ion-slides>
  </div>
</ion-content>

在 map .ts

第一个导入 slider

import { Slides } from 'ionic-angular';

然后在类里面获取 slider 的引用

@ViewChild(Slides) slides: Slides;

然后添加这个方法

slideChanged() {
    let currentIndex = this.slides.getActiveIndex();
    let currentEvent  =this.responseData.weekEvents[currentIndex];
    this.map.setCenter({lat: parseFloat(currentEvent.lat),lng:parseFloat(currentEvent.lon)});
}

这将使当前 slider 的标记成为 map 的中心

现在剩下要做的就是单击标记应该使 slider 处于事件状态。
完成后我会在这里更新它。 :))