Question

首先，对不起我的英语......

我正在使用openstreetmap和信息传单以及列表

在地图上工作

根据选中的“标题”，我在地图上显示不同结构的标记及其在地图下的结构列表

当他们点击地图下的结构列表标题时，我会打开地图上的弹出窗口。

我的问题是存在具有meme地址的结构（相同的lat和lon），因此标记重叠。标记是集群。如果他们点击群集上的地图，那就是“蜘蛛网”，我可以看到几个标记。相反，当他们点击地图下的结构标题时，它不显示螺旋和弹出

我找到了一个禁用群集的解决方案，它不再表示同一地址有多个标记。这是一个我不完全满意的解决方案，因为我希望用户看到这个地址有几个结构/标记

地图是：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();

};
}}

THX 斯蒂芬

Answer 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

在我的情况下，当我有一个弹出式按钮时，我想突出显示标记。 parm in the url

Leaflet spiderfy onclick on link to open popup

1 个答案: