ионный слайд, ионный сегмент и карта Google - PullRequest
Новая
       16

ионный слайд, ионный сегмент и карта Google

0 голосов
/ 27 марта 2020

Я использовал ионные и ион-слайды с картой Google, используя <div #Map class="map"></div>.

мой html код выглядит так 

<ion-segment class="segment-wrapper" (ionChange)="segmentChanged($event)" [(ngModel)]="segment">
      <ion-segment-button value="0">
        <ion-label>Location</ion-label>
      </ion-segment-button>
      <ion-segment-button value="1">
        <ion-label>Details</ion-label>
      </ion-segment-button>
      <ion-segment-button value="2">
        <ion-label>Photos</ion-label>
      </ion-segment-button>
    </ion-segment>

Ион-слайды расположены так это .. 

 <ion-slides class="slides-wrapper" #slides (ionSlideDidChange)="slideChanged()" 
    scrollbar="true">
    <ion-slide>
      <div #Map class="map"></div>
    </ion-slide>
    <ion-slide></ion-slide>
   <ion-slide></ion-slide>
<ion-slides>

, поэтому при использовании нажмите на любой сегмент, к которому он будет перемещаться в соответствии со слайдом, вот код для того же самого (для изменения слайда и сегмента) 

@ViewChild('slides', { read: false }) slider: IonSlides;
slideChanged() {
  this.slider.getActiveIndex().then(index => {
    this.segment = index;
  });
}

segmentChanged(ev) {
  this.slider.slideTo(ev.target.value)
}

css для карты 

.map{
  height: 100%;
}
.map img {
  max-height: none !important;
}

когда я нажимаю на карту в любом месте, ее маркер добавления также вот код для того же. 

map: any;
marker: any;

this.map.addListener('click', (event) => {
        this.marker.setMap(null);
        this.marker = new google.maps.Marker({
          position: { lat: event.latLng.toJSON().lat, lng: event.latLng.toJSON().lng },
          map: this.map,
          title: 'Click to zoom'
        });
        this.map.panTo(this.marker.getPosition())
        var latlngbounds = new google.maps.LatLngBounds();
        latlngbounds.extend({ lat: event.latLng.toJSON().lat, lng: event.latLng.toJSON().lng });
        this.map.fitBounds(latlngbounds);
        this.setMarkerAndUpdateForm(event.latLng.toJSON().lat, event.latLng.toJSON().lng);
      });

что здесь может кто-нибудь помочь?

иногда в сети он работает, но на мобильном устройстве он не работает должным образом, другая проблема, когда я нажимаю на карту и добавляю маркер или увеличиваю масштаб, а затем пытаюсь скользить, слайд работает нормально, но сегмент не меняется как и ожидалось. прикрепив небольшое видео здесь .. bug

...