Листовка spiderfy кликните по ссылке, чтобы открыть poup
Во -первых, извините за мой английский...
Я работаю над картой, используя 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 © <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 Стефан
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 в URL