Листовката показва всички изскачащи прозорци на всички производители и ги запазва в картата

Позовавам се на Ръководство за бърз старт - брошура - JavaScript библиотека за интерактивни карти за прилагане на показване на маркер на картата.

Искам да покажа всички изскачащи прозорци на всички маркери и ако щракна върху картата, тя все още запазва изскачащите прозорци.

Гърлото на бутилката е

1. Как да промените кода, за да показвате множество изскачащи прозорци на маркерите

2.Как да запазя изскачащите прозорци, ако щракна върху картата

Тъй като търся това в Google, не мога да намеря решението. Някой може ли да ми помогне?


javascript leaflet
person 敬錞 潘    schedule 19.03.2018    source източник

Отговори (1)


arrow_upward
10
arrow_downward

Ето модифицирана версия на ръководството за бърз старт на Leaflet. Добавя три маркера със собствени индивидуални изскачащи прозорци и запазва отворено:

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);

var markers = [
    {pos: [51.51, -0.10], popup: "This is the popup for marker #1"},
    {pos: [51.50, -0.09], popup: "This is the popup for marker #2"},
    {pos: [51.49, -0.08], popup: "This is the popup for marker #3"}];
markers.forEach(function (obj) {
    var m = L.marker(obj.pos).addTo(mymap),
        p = new L.Popup({ autoClose: false, closeOnClick: false })
                .setContent(obj.popup)
                .setLatLng(obj.pos);
    m.bindPopup(p);
});

Ключовите точки са:

  • всеки маркер се нуждае от собствен изскачащ слой
  • изскачащите слоеве трябва да бъдат конфигурирани с autoClose: false (=> изскачащият прозорец не се затваря, когато се отвори друг изскачащ прозорец) и closeOnClick: false (=> изскачащият прозорец не се затваря, когато се щракне върху картата).
person Flopp    schedule 19.03.2018
comment
необходимо за промяна на реда bindPopup() на m.bindPopup(p).openPopup();, за да работи. - person ethmz; 30.05.2019