Leaflet spiderfy onнажмите ссылку, чтобы открыть пакет

во-первых, извините за мой английский ...

Я работаю над картой, используя openstreetmap, информационный буклет и листинг.

По проверенным «рубрикам» показываю маркеры разных построек на карте и список их построек под картой.

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

Моя проблема в том, что есть структуры с адресом мема (те же широта и долгота), поэтому маркеры перекрываются. Маркеры кластеры. если они щелкнут по карте на кластере, это "spiderfy", и я могу увидеть несколько маркеров. Напротив, когда они нажимают на заголовок структуры под картой, спираль и всплывающее окно не отображаются.

Я нашел решение, которое отключает кластер и больше не указывает на наличие нескольких маркеров на один и тот же адрес. Это решение, которое меня не полностью устраивает, потому что я хотел бы, чтобы пользователи видели, что по этому адресу есть несколько структур / маркеров.

карта: http://www.ecocitoyen-grenoble.org/joomla/index.php/annuaire (для проверки с последним флажком "Loisirs, espaces naturels" - изображение человека и щелкните последнюю структуру в списке)

Скрипты:

Карта:

<script type="text/javascript">
// <![CDATA[
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    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>'
});
var map = L.map('map', {
    center: [45.1666700, 5.7166700],
    zoom: 13,
    layers: [osm]
});
var markers = L.markerClusterGroup({
    //disableClusteringAtZoom: 18
});
// ]]>
</script>

Маркеры дисплея:

function rech_picto_structure()
      {


    map.removeLayer(markers);
    markers.clearLayers();

    var rub1 = '0';
    var rub2 = '0';
    var rub3 = '0';
    var rub4 = '0';
    var rub5 = '0';
    var rub6 = '0';

          var cp_ville = '';

          cp_ville =  document.getElementById("cp_ville").value;

    if (document.getElementById("box_layer_1").checked ) 
    {
        rub1 = '1';            
    }

    if (document.getElementById("box_layer_2").checked ) 
    {
        rub2 = '1';            
    }

    if (document.getElementById("box_layer_3").checked ) 
    {
        rub3 = '1';            
    }

    if (document.getElementById("box_layer_4").checked ) 
    {
        rub4 = '1';            
    }

    if (document.getElementById("box_layer_5").checked ) 
    {
        rub5 = '1';            
    }

    if (document.getElementById("box_layer_6").checked ) 
    {
        rub6 = '1';            
    }   

    if (rub1 == '0' && rub2 == '0' && rub3 == '0' && rub4 == '0' && rub5 == '0' && rub6 == '0')
    {
        document.getElementById('liste_annuaire').innerHTML = "Veuillez choisir une rubrique pour afficher les structures.";
        document.getElementById('picto_structure_div').innerHTML = "Veuillez choisir une rubrique pour afficher les structures.";

    }
    else
    {

        var xhr = getXhr();

        // On défini ce qu'on va faire quand on aura la réponse
        xhr.onreadystatechange = function()
        {

          // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
          if(xhr.readyState == 4  && xhr.status == 200)
          {
          var picto = xhr.responseText;
          if (picto.length > 3)
          {
                          liste_structure = '';
                          var tab_picto = [];
                          markers_all = [];
                          var addressPoints = picto.split("|");
                          //alert (addressPoints);
                          for (var i = 0; i < addressPoints.length; i++) {
                              var cel = addressPoints[i].split("µ");
                              tab_picto.push(cel);
                          }
                          for (var i = 0; i < tab_picto.length; i++) {
                              var a = tab_picto[i];
                              var title = a[2];
                              var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title }).bindPopup("<div><b>" + a[3] + "</b><br/>"  + a[4] + "<br><br>" + a[5] + "<br/></div>");

                              liste_structure += a[6];

                              markers_all.push(marker);
                          }      

                          for (var i in markers_all){
                              markers.addLayer(markers_all[i]);
                          }

                          map.addLayer(markers);
                          map.fitBounds(markers.getBounds());

            if (liste_structure == '')
            {
            document.getElementById('liste_annuaire').innerHTML = "Veuillez choisir une rubrique pour afficher les structures.";
            document.getElementById('picto_structure_div').innerHTML = "Veuillez choisir une rubrique pour afficher les structures.";
            }
            else
            {
            document.getElementById('liste_annuaire').innerHTML = liste_structure;
            document.getElementById('picto_structure_div').innerHTML = tab_picto.length + " structures trouvées";
            }
          }
          else
          {
            document.getElementById('liste_annuaire').innerHTML = "Veuillez choisir une rubrique pour afficher les structures.";
            document.getElementById('picto_structure_div').innerHTML = "Veuillez choisir une rubrique pour afficher les structures.";
          }
          }
        }

        xhr.open("POST","../../admin/annuaire/generer_carte.php",true);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send("rub1="+rub1+"&rub2="+rub2+"&rub3="+rub3+"&rub4="+rub4+"&rub5="+rub5+"&rub6="+rub6+"&cp_ville="+cp_ville);
    }
      }

Открытие всплывающего окна при нажатии на заголовок списка под картой

  function markerFunction(id){
for (var i in markers_all){
var markerID = markers_all[i].options.title;
//alert(markerID);
if (markerID == id){

      LatLng = markers_all[i].getLatLng();
      //alert(LatLng);

      //map.setView([45.19116, 5.7311], 15);
      map.setView([LatLng.lat, LatLng.lng], 20);
      //markers.spiderfy();
              //markers.unspiderfy()
      markers_all[i].openPopup();

};
}}

Спасибо Стефан


person Stephane Desrousseaux    schedule 13.08.2014    source источник


Ответы (1)


Если я хорошо понимаю, вы хотите открыть всплывающее окно, соответствующее элементу в списке, но маркер находится в кластере

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

markerCluster.removeLayer(markers[selectedId]);
map.addLayer(markers[selectedId]);
markers[selectedId].openPopup();

Посмотрите на источник страницы: http://franceimage.github.io/leaflet/8/?map=46.566414,2.4609375,6&popup=81

В моем случае я хочу выделить маркер, когда в URL-адресе есть всплывающее окно.

person YaFred    schedule 14.08.2014