Как настроить внешний вид всплывающего окна листовки?

Я рассматриваю настройку карты, построенной с помощью листовки, и я хотел бы настроить Popup (L.popup).

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

Кто-нибудь знает какие-либо альтернативы или существующие способы сделать это?

благодаря

Ответы

Ответ 1

Вы должны настроить внешний вид и использовать css. Интересны следующие селекторы:

.leaflet-popup-content-wrapper {
}

.leaflet-popup-content-wrapper .leaflet-popup-content {
}

.leaflet-popup-tip-container {
}

В зависимости от вашего браузера вы можете использовать такие инструменты, как Firebug для Firefox или встроенные инструменты разработчика в Chrome/Safari (щелкните правой кнопкой мыши в любом месте страницы и нажмите "Проверить элемент" или используйте ярлыки), чтобы просмотреть всплывающее окно и найти дополнительные css-селектора, которые вы можете изменить.

Чтобы расширить его функциональность, вы должны начать с просмотра исходного кода. Посмотрите на источники других компонентов Leaflet, пока не почувствуете, что происходит. Расширьте класс Popup следующим образом, а затем измените все, что хотите:

L.CustomPopup = L.Popup.extend({
  // You changes here
});

Ответ 2

В mapbox есть пример, который использует leaflet.js. В этом примере показано, как использовать пользовательскую подсказку в листовке.

<style>
/*
 * These CSS rules affect the tooltips within maps with the custom-popup
 * class. See the full CSS for all customizable options:
 * https://github.com/mapbox/mapbox.js/blob/001754177f3985c0e6b4a26e3c869b0c66162c99/theme/style.css#L321-L366
*/
.custom-popup .leaflet-popup-content-wrapper {
  background:#2c3e50;
  color:#fff;
  font-size:16px;
  line-height:24px;
  }
.custom-popup .leaflet-popup-content-wrapper a {
  color:rgba(255,255,255,0.5);
  }
.custom-popup .leaflet-popup-tip-container {
  width:30px;
  height:15px;
  }
.custom-popup .leaflet-popup-tip {
  border-left:15px solid transparent;
  border-right:15px solid transparent;
  border-top:15px solid #2c3e50;
  }
</style>

<div class='custom-popup' id='map'></div>

Ответ 3

Другой способ настройки всплывающего окна - создать свой собственный класс css для всплывающего окна, например:

<style>
/* css to customize Leaflet default styles  */
.popupCustom .leaflet-popup-tip,
.popupCustom .leaflet-popup-content-wrapper {
    background: #e0e0e0;
    color: #234c5e;
}
</style>

а затем в поле map div вы можете установить настраиваемое всплывающее окно маркера с bindPopup метода bindPopup и передать объект customOptions, в котором вы укажете css class name:

// create popup contents
var customPopup = "<b>My office</b><br/><img src='http://netdna.webdesignerdepot.com/uploads/2014/05/workspace_06_previo.jpg' alt='maptime logo gif' width='150px'/>";

// specify popup options 
var customOptions =
    {
    'maxWidth': '400',
    'width': '200',
    'className' : 'popupCustom'
    }


var marker = L.marker([lat, lng], {icon: myIcon}).addTo(map);

// bind the custom popup 
marker.bindPopup(customPopup,customOptions);

Надеюсь, поможет.