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

Каков наилучший способ, чтобы все всплывающие подсказки на карте Mapbox открывались при загрузке страницы, без необходимости нажимать на маркер, чтобы показать их? Я попытался удалить opacity: 0 из .leaflet-popup, но это не сработало, потому что кажется, что они встроены в DOM на лету с помощью JS.

Можно ли это сделать? Я понимаю, что это необычно, но у меня есть макет, который я пытаюсь воссоздать, в котором маркеры выглядят как всплывающие подсказки с заголовком внутри. Я искал и искал способы настроить маркеры, но единственное, что я могу найти, — это использовать собственное изображение. Поскольку у меня должны быть динамические заголовки, показывающие, что это не сработает, поэтому теперь я планирую использовать прозрачные png 1x1 для изображений маркеров и просто показывать всплывающие подсказки по умолчанию.

Изменить

Вот мой код:

// Setup map
var map = L.mapbox.map("destinations-map", "xxx")
    .setView([40, -74.50], 2);

// Load regions from JSON file
var loadRegions = function () {
    $.ajax({
        dataType: "json",
        url: "/regions",
        success: function (data) {

            $.each(data.regions, function(i, region) {
                L.mapbox.markerLayer({
                    type: "Feature",
                    geometry: {
                        type: "Point",
                        coordinates: region.coordinates
                    },
                    properties: {
                        title: region.title
                    }
                })
                .addTo(map)
                .openPopup();
            });

        }
    });
};

// Initially load region markers
loadRegions();

person Trevan Hetzel    schedule 02.01.2014    source источник


Ответы (1)


Вы можете изменить поведение всплывающих окон по умолчанию, расширив объект Map в Leaflet. Leaflet.js широко использует псевдоклассический шаблон наследования, поэтому у вас уже есть много работы. Пытаться:

L.Map = L.Map.extend({
    openPopup: function(popup) {
        this._popup = popup;

        return this.addLayer(popup).fire('popupopen', {
            popup: this._popup
        });
    }
});

А затем, когда вы добавите свои всплывающие окна, откройте их прямо так:

L.marker([65.10, 14.77])
  .addTo(map)
  .bindPopup("<b>Hello world!</b><br />I am popup 1.")
  .openPopup();

Вот пример: http://jsfiddle.net/P543v/

person durrrutti    schedule 02.01.2014
comment
Большое спасибо! Это работает для открытия последнего всплывающего окна по умолчанию, но не для всех. Фактически, первый фрагмент (L.Map.extend) ничего не делает, как кажется. Я не совсем уверен, какова цель этого, хотя. Это чтобы иметь возможность открывать более одного всплывающего окна за раз? - person Trevan Hetzel; 03.01.2014
comment
Вы добавили расширение вверху вашего скрипта? Этот фрагмент переопределяет метод openPopup по умолчанию, который также содержит this.closePopup();. Переопределяя его без части closePopup, карта не должна закрывать другие всплывающие окна при нажатии на новые. - person durrrutti; 03.01.2014
comment
Я добавил пример в свой ответ. Надеюсь, это должно прояснить ситуацию. - person durrrutti; 03.01.2014
comment
Спасибо за пример. Я думаю, что моя проблема в том, как я создаю маркеры. Я просматриваю данные JSON внутри L.mapbox.markerLayer ()...}), а затем вызываю .addTo(map) для этого. Немного иначе, чем вы это делаете. Я обновил свой вопрос своим фактическим кодом. - person Trevan Hetzel; 03.01.2014
comment
Я понимаю. Непонятно, где вы настраиваете всплывающие окна. Но главная проблема здесь — часть L.Map.extend. Открываются ли всплывающие окна по щелчку и закрываются ли вы, когда вы нажимаете другое всплывающее окно? В этом случае переопределяющая часть по какой-то причине не регистрируется. - person durrrutti; 03.01.2014
comment
Честно говоря, я нигде не настраиваю всплывающие окна. Я предполагаю, что это просто часть Mapbox по умолчанию, когда вы объявляете title, он использует это для всплывающего окна. - person Trevan Hetzel; 03.01.2014
comment
Возможно, вы захотите пропустить класс markerlayer и вместо этого создать точки. Таким образом, вы можете использовать некоторые варианты моего ответа выше. [В]правильно сейчас Leaflet/MapBox.js не предназначены для одновременного отображения более одного всплывающего окна. support.mapbox.com/discussions/ mapboxjs/ - person durrrutti; 03.01.2014
comment
Ага, я тоже только что увидел эту тему. Я рассмотрю возможность использования баллов. Спасибо! - person Trevan Hetzel; 03.01.2014