单击传单上的标记打开模式

问题描述

我有一张带有标记和Leaflet.markercluster的地图

我想要实现的是，当您单击标记时，模态会显示如下信息：纬度，经度等。

我设法使其与layer.bindPopup(content);一起使用，但是我不知道如何将这些参数传递给click函数。

我尝试过

markers.on('click',function (e) {
        console.log('show');
        var id = this.options.id;
        $(".modal-content").html('Marker id: ' + id);
        $('#emptymodal').modal('show');
        map.setView(e.target.getLatLng());
    });

但这不起作用。

我将所有代码留在这里

PlaceMarker = L.CircleMarker.extend({
  options: {
    id: ''
  }
});

   
        var data = <?PHP echo $json ?>;
        // Create map instance
        var map = L.map('map',{
            center:[39.4697500,-0.3773900],zoom:10
        });

          L.tileLayer('https://api.mapBox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accesstoken}',{
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,Imagery © <a href="https://www.mapBox.com/">MapBox</a>',maxZoom: 18,id: 'mapBox/streets-v11',tileSize: 512,zoomOffset: -1,accesstoken: 'XXXX'
}).addTo(map);

    

        //create markerclustergroup 
        var markers=L.markerClusterGroup();
        // create a geojson object
        let geojsonData = createGeoJson(data);

        function createGeoJson(data) {
            var geojson = {
                "type":"FeatureCollection","features":[

                ]
            };

            // iterate through the data array
            data.forEach(element => {
                let marker = L.marker([element.Latitude,element.Longitude]);
                let pntGeojson = marker.toGeoJSON();

                pntGeojson.properties = element;
                geojson.features.push(pntGeojson);
            });

            return geojson;
        }


        // create a  geojson instance
        var categorynone = L.geoJson(geojsonData,{
            onEachFeature:function(feature,layer) {
                let content ="<table class='table table-striped table-bordered table-condensed'>" +
                    "<tr><th>Dirección:</th><td>" + feature.properties.address + "</td></tr>" + "<tr><th>Categoría: </th><td>" + feature.properties.category +"</td></tr><table>";
                
               
            },pointToLayer:function(geoObj,latLng) {
                return L.marker(latLng);
              
            },filter:function (feature,layer){
                return feature.properties.category == "";  
            }

        });
        var category1 = L.geoJson(geojsonData,layer) {
                let content ="<table class='table table-striped table-bordered table-condensed'>" +
                    "<tr><th>Dirección:</th><td>" + feature.properties.address + "</td></tr>" + "<tr><th>Categoría: </th><td>" + feature.properties.category +"</td></tr><table>";
                
             
            },layer){
                return feature.properties.category == "categoria1";  
            }

        });

        var category2 = L.geoJson(geojsonData,layer) {
                let content ="<table class='table table-striped table-bordered table-condensed'>" +
                    "<tr><th>Dirección:</th><td>" + feature.properties.address + "</td></tr>" + "<tr><th>Categoría: </th><td>" + feature.properties.category +"</td></tr><table>";
          
            },layer){
                return feature.properties.category == "categoria2";  
            }

        });
        
         
          
        var all = L.layerGroup([category1,category2,categorynone]);
        L.control.layers({
            "All":all,"categorynone":categorynone,"category1":category1,"category2":category2,"cluster":markers,}).addTo(map);
        markers.addLayer(all);
        markers.addTo(map);

        console.log(markers);

//Todo: Ahora solo falta recuperar la información y sacarla por aquí
markers.on('click',function (e) {
        console.log('show');
        var id = this.options.id;
        $(".modal-content").html('Marker id: ' + id);
        $('#emptymodal').modal('show');
        map.setView(e.target.getLatLng());
    });

    /*Close modal on map click */
    map.on('click',function (e) {
        console.log('Hide');
        // $('.modal').modal('hide');
    });

   #map,#acf-map { height: 500px; }
    

<script
        src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
        crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js">  </script>
         <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<h1 class="main-title"><?= post_type_archive_title(); ?></h1>

<div aria-labelledby="myModalLabel" class="modal left fade" id="emptymodal" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content"></div>
      <!-- modal-content -->
    </div>
    <!-- modal-dialog -->
  </div>




<section class="list-cases">
  <div class="container">
    <div class="row position-relative">
      <?PHP
        $args = array(
          'post_type' => 'lugar','posts_per_page' => 10,);
        $query = new WP_Query( $args );
        ?>
        
        <?PHP $counter = 1; ?>
      <?PHP while( $query->have_posts() ) : $query->the_post() ?>
      <div class="item-case-<?= $counter ?> col-md-12" data-hover="<?= $counter ?>" data-aos="fade-up" data-aos-duration="2000">
        <div class="case-container"> 
          <?PHP the_title( '<h2 class="entry-title"><a href="' . get_permalink() . '" title="' . the_title_attribute( 'echo=0' ) . '" rel="bookmark">','</a></h2>' ); ?>
          <p><?PHP the_field('subtitle') ?></p>
          <p><?PHP the_field('address') ?></p>
          <p><strong>Latitud:</strong> <?PHP the_field('lat') ?></p>
          <p><strong>Longitud:</strong> <?PHP the_field('lon') ?></p>
          
         
          
        </div>
      </div>
        <?PHP $counter++; ?>
      <?PHP endwhile; wp_reset_postdata(); ?>
    </div>
  </div>
  <div id="map">
  </div>
</section>
 <?PHP
          $arg = array( 'post_type' => 'lugar',);
          $loop = new WP_Query( $arg );
 $posts = $loop ->get_posts();
 foreach( $posts as $post ) { 
$output[] = array(

          'address' => $post->address,'category'=> $post->category,'Latitude'=> $post->lat,'Longitude'=>$post->lon
);
 } 
$json =json_encode($output);
?>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）