Как настроить всплывающее окно листовки, чтобы включить эскизы изображений и другие настройки? - PullRequest
Новая
       19

Как настроить всплывающее окно листовки, чтобы включить эскизы изображений и другие настройки?

0 голосов
/ 24 января 2019

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

вот мой машинописный код: 

refresh() {
  this.artworkService.retrieveAll().then((artworkList) => {
    this.artworkList = artworkList;
    for (let artwork of this.artworkList) {
      var popupInfo = "<span class='test'>" + artwork.name + "</span>" + "<br/>" + artwork.filename;
      console.log(artwork.name);
      L.marker([artwork.latitude, artwork.longitude], this.markerIcon).addTo(this.map)
      .bindPopup(popupInfo);
    }
  });
}

здесь я попытался обернуть заголовок вокруг промежутка и надеялся добавить к нему немного CSS, но ничего не сделал! любые советы будут высоко оценены!

1 Ответ

0 голосов
/ 24 января 2019

Скорее всего, маркеры не отображаются, потому что вы объявляете markerIcon неправильно.Например, это должно быть: 

markerIcon = {
    icon: L.icon({
      iconSize: [25, 41],
      iconAnchor: [10, 41],
      popupAnchor: [2, -40],
      // specify the path here
      iconUrl: "https://unpkg.com/leaflet@1.4.0/dist/images/marker-icon.png",
      shadowUrl: "https://unpkg.com/leaflet@1.4.0/dist/images/marker-shadow.png"
    })
};

Во-вторых, чтобы применить пользовательское css к всплывающему окну, вам необходимо предоставить popupOptions в методе bindPopup или создать экземпляр L.popup и присоединить имя класса.Проверьте также здесь .Первый способ будет выглядеть следующим образом: 

const popupOptions = {
  className: "test"
};
for (let artwork of this.artworkList) {
  const popupInfo =
    "<span class=''>" +
    artwork.name +
    "</span>" +
    "<br/>" +
    artwork.filename;
  console.log(artwork.name);
  L.marker([artwork.latitude, artwork.longitude], this.markerIcon)
    .addTo(this.map)
    .bindPopup(popupInfo, popupOptions);
}

, а затем включить стиль в глобальный style.css

, например: 

.test .leaflet-popup-content-wrapper {
      background: #2ce897;
      color: #eee;
      font-weight: bold;
      font-size: 12px;
      line-height: 24px;
      border-radius: 0px;
}

Вот демо с примером вашего пользовательского случая.

...