Когда мышь находится на изображении справа, я хочу выполнить действие с соответствующим маркером.
https://www.mobilhomedirect.fr/vente-mobil-home-test.php
// Nous définissons le dossier qui contiendra les images des marqueurs
// We define here the folder that will contain marker pictures
var iconBase = 'https://www.mobilhomedirect.fr/assets/images/';
// On initialise la latitude et la longitude de Paris (centre de la carte)
// Initializing Paris's longitude and latitude (center of the map)
var lat = <?php echo $latcenter ; ?>;
var lon = <?php echo $lngcenter ; ?>;
var z = <?php echo $z ; ?>;
var macarte = null;
// Fonction d'initialisation de la carte
// Map initialization function
function initMap() {
// Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
// Create object "mymap" then inserting in HTML element which created ID "map"
macarte = L.map('pictindexosm').setView([lat, lon], z);
// Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
// Leaflet doesn't fetch maps (tiles) from a default server. We need to specify from where we wish to get them back. Here, openstreetmap.fr
L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
// Il est toujours bien de laisser le lien vers la source des données
// Always a good idea to a link towards data source
attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
minZoom: 1,
maxZoom: 20
}).addTo(macarte);
var myItems = [
<?php
mysqli_set_charset($bdd,"utf8");
$reqmker = mysqli_query($bdd, "SELECT * FROM donnees_loc WHERE chp_ref LIKE 'vte%' AND chp_lat < ".$latne." AND chp_lat > ".$latsw." AND chp_lng > ".$lngsw." AND chp_lng < ".$lngne." AND chp_valide = 'valide' ".$critregplus." ORDER BY chp_date DESC, chp_heure DESC LIMIT ".(($cpage-1)*$perpage).",".$perpage."");
while($ret = mysqli_fetch_assoc($reqmker))
{
$ref = $ret['chp_ref'] ;
$lat = $ret['chp_lat'] ;
$lng = $ret['chp_lng'] ;
$lid = $ret['chp_id'] ;
?>
["<?php echo $ref ; ?>", <?php echo $lat ; ?>, <?php echo $lng ; ?>],
<?php } ?>
];
var marker = {};
for (var i = 0; i < myItems.length; i++) {
var item = myItems[i];
//alert(item[0]);
marker[item[0]] = new L.marker([item[1],item[2]]).bindPopup(item[0]).addTo(macarte);
};
for (var j = 0; j < myItems.length; j++){
var item2 = myItems[j];
document.querySelector('#'+item2[0]).addEventListener('mouseenter', function() {
//alert(item2[0]);
marker[item2[0]].fire('click');
marker[item2[0]].on('click', function(e){ e.layer.openPopup(item2[0]); });
});
};
document.querySelector('#vte_0301135155_nYGH').addEventListener('mouseenter', function() {
marker['vte_0301135155_nYGH'].fire('click');
marker['vte_0301135155_nYGH'].on('click', function(e){ e.layer.openPopup(item[0]); });
});
};