如何解决单击传单上的标记打开模式
我有一张带有标记和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 © <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 举报,一经查实,本站将立刻删除。