добавить вложенное всплывающее окно для всплывающих окон на маркере mapbox gl js - PullRequest
0 голосов
/ 05 марта 2019

Я использую mapbox gl js

Я создал слой с именем borderLayer

и показал на нем маркеры.

функция для извлечения данных и отображениямаркеры

    prepareGeoJsonData(data) {
    let features = [];
    let counter = 0;

    for (let val of data) {
      features.push({
        type: "Feature",
        geometry: val.address.geometry.border,
        center: val.address.geometry.center,
        properties: {
          center: val.address.geometry.center.coordinates,
          number: val.address.number,
          compNumber: val.address.compNumber,
          street: val.address.street,
          type: val.type,
          status: val.status,
          zipCode: val.address.zipCode,
          city: val.address.city,
          bathrooms: this.getProperties('basic.bathrooms', val),
          bedrooms: this.getProperties('basic.rooms', val),
          fiscalArea: this.getProperties('basic.parcelFiscalArea', val),
          livingArea: this.getProperties('basic.livingArea', val),
          price: this.formatter.format(this.getProperties('pricing.price', val)),
        },
        id: counter,
      });

      const cords = features[counter].properties.center

      if (!cords) {
        continue;
      }

      const el = document.createElement('div');
      el.className = 'mapsoldInfoWindow';

      const status = document.createElement('div');
      status.className = 'status';
      status.textContent = val.status

      const price = document.createElement('div');
      price.className = 'price';
      const pricingPrice = this.transformPrice(this.getProperties('pricing.price', val));
      price.textContent = pricingPrice + ' €'

      const icon = document.createElement('span');
      icon.className = 'fa fa-caret-down';

      el.appendChild(status);
      el.appendChild(price);
      el.appendChild(icon);

      el.style.width = 90 + 'px';
      el.style.height = 90 + 'px';

      let popup = new mapboxgl.Popup();
      popup.setHTML(this.getPOIPopupContentOnLandUnit(features[counter].properties)['outerHTML']);
      // add marker to map
      let marker = new mapboxgl.Marker(el)
        .setLngLat(cords)
        .setPopup(popup)
        .addTo(this._mapRef);
      this.markers.push(marker);

      counter++;
    };
    this.housesComponent.dynamicPhotos(features);


    return {
      type: "FeatureCollection",
      features: features
    };
  }

Я хочу показать всплывающее окно со следующим потоком:

  1. карта загружена
  2. маркер на карте
  3. нажмите на маркер (popup1)
  4. нажмите на всплывающее окно (popup2)

всплывающая функция на маркере

 getPopupContentOnAsset(feature: any): string {
    let prop: any = feature;
    let address1 = `${prop.number ? prop.number : ''} ${prop.compNumber ? prop.compNumber : ''} ${prop.street ? prop.street: ''}`;
    let address2 = `${prop.city ? prop.city : ''} (${prop.zipCode ? prop.zipCode : ''})`;
    let property = `${prop.bedrooms ? prop.bedrooms + ' bed' : ''} ${prop.bathrooms ? prop.bathrooms + ' bath' : ''}`
    let price = `${prop.price ? prop.price.toLocaleString() : ''}`
    let popupWrapper = jQuery(`<div class="popup-wrapper"></div>`)[0];
    let link = jQuery(`<div class="popup-title poi-name">Open Street View</div>`).click(() => {
      let lat = prop.center[1];
      let lng = prop.center[0];
      this.openStreetView(lat, lng);
    })[0];
    jQuery(popupWrapper).append(link);
    let content = '';
    content = `  <div class="mapInfoWindow">
    <img id="pop" src="../../../assets/img/mapPopupImg.jpg">
    <div class="infoWindowFooter">
      <div class="address">${address1}</div>
      <div class="address">${address2}</div>
        <div class="flex-box contentWrap">
          <div class="flex-item text-muted">${property}</div>
          <div class="flex-item heigh-light-text">${price}</div>
      </div>
    </div>
  </div>`;
    jQuery(popupWrapper).append(content);
    return popupWrapper;
  }

Функция щелчкачто я добавил к link не работает, это просто простое всплывающее окно прямо сейчас.

Как я могу сделать всплывающее окно кликабельным?

...