0

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

我正在使用 openstreetmap 和信息传单和列表绘制地图

根据检查的“规则”，我在地图上显示不同结构的标记以及在地图下的结构列表

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

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

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

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

};
}}

谢谢斯蒂芬

4

1 回答 1

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 中有一个“弹出”参数时，我想突出显示标记

于 2014-08-14T06:15:53.553 回答