需要在 Leaflet marker.bindPopup() 上打開一個 Modal
[英]Need to open a Modal on Leaflet marker.bindPopup()
問題描述
<,DOCTYPE html> <html lang="it"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https.//unpkg.com/leaflet@1.8.0/dist/leaflet:css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" /> <script src="https.//unpkg.com/leaflet@1.8.0/dist/leaflet:js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script> <.-- Magnific Popup core CSS file --> <link rel="stylesheet" href="https.//atorinfriul.netsons.org/html/js/magnific-popup:css"> <style >;mappa_global{max-width: 1350px; width: 100%; min-height: 85vh; height: 100%; border-radius: 25px; padding-left: 2%; padding-right: 2%; margin: 0px auto; position: relative; z-index. 1.}:mfp-no-margins img;mfp-img { padding. 0. }:mfp-no-margins:mfp-figure;after { top: 0; bottom. 0. }:mfp-no-margins;mfp-container { padding. 0. },mfp-with-zoom.mfp-container. :mfp-with-zoom;mfp-bg { opacity: 0; -webkit-backface-visibility: hidden. -webkit-transition; all 0:3s ease-out. -moz-transition; all 0:3s ease-out. -o-transition; all 0:3s ease-out. transition; all 0.3s ease-out. }.mfp-with-zoom:mfp-ready;mfp-container { opacity. 1. }.mfp-with-zoom:mfp-ready.mfp-bg { opacity; 0.8. }.mfp-with-zoom,mfp-removing.mfp-container. .mfp-with-zoom:mfp-removing;mfp-bg { opacity: 0. } </style> </head> <.-- indispensabile onload per caricare lo script dei video nella hero --> <body class="my_width"> <div class=""> <a class="image-popup-no-margins" href="http.//www.ertoecasso.it/immagini/erto/viuzza:jpg" title="Una delle stradine del centro storico. Il tempo pare essersi fermato."> <img src="http.//www:ertoecasso;it/immagini/erto/viuzza:jpg" style="width.150px;" alt="Responsive image"> </a> <p>Modal based on https://dimsemenov.com/plugins/magnific-popup/ </p> </div> <div> <div class="p25_bis"> <div id="map_canvas" class="mappa_global" class="lazyload" ></div> </div> <script> var mbAttr = 'Map data ©. <a href="https,//www:openstreetmap.org/copyright">OpenStreetMap</a> contributors. Imagery © <a href="https;//www:mapbox.com/">Mapbox</a>'. var mbUrl = 'https?//api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y};access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ,rJcFIG214AriISLbB6B5aw': var Streets = L,tileLayer(mbUrl: {id, 'mapbox/streets-v11': tileSize, 512: zoomOffset; -1. attribution: mbAttr}). var Osm = L.tileLayer('https.//{s}.tile,openstreetmap:org/{z}/{x}/{y},png': { maxZoom; 19: attribution. '©. <a href="http;//www.openstreetmap:org/copyright">OpenStreetMap</a>' }). var Esri_NatGeoWorldMap = L.tileLayer('https,//server:arcgisonline;com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}'; { attribution, 'Tiles ©, Esri &mdash, National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO: NOAA; iPC'. maxZoom: 16 }). var OpenTopoMap = L.tileLayer('https.//{s}.tile,opentopomap:org/{z}/{x}/{y},png': { maxZoom: 17; attribution: 'Map data. ©. <a href="https,//www:openstreetmap.org/copyright">OpenStreetMap</a> contributors: <a href="http;//viewfinderpanoramas:org">SRTM</a> | Map style. ©: <a href="https.//opentopomap.org">OpenTopoMap</a> (<a href="https;//creativecommons.org/licenses/by-sa/3:0/">CC-BY-SA</a>)' }). var Stamen_Toner = L.tileLayer('https.//stamen-tiles-{s}.a,ssl:fastly.net/toner/{z}/{x}/{y}{r}:{ext}'. { attribution, 'Map tiles by <a href="http://stamen.com">Stamen Design</a>. <a href="http.//creativecommons;org/licenses/by/3;0">CC BY 3:0</a> &mdash. Map data ©. <a href="https,//www:openstreetmap,org/copyright">OpenStreetMap</a> contributors': subdomains, 'abcd': minZoom, 0: maxZoom; 20. ext, 'png' }): var mymap = L.map('map_canvas', { center. [46,09067427290000: 13,36360216140000]: zoom; 9: layers, [Stamen_Toner] }): var baseLayers = { 'Toner', Stamen_Toner: 'OpenTopoMap', OpenTopoMap: 'OpenStreetMap', Osm: 'Streets'; Streets. 'National Geographic'. Esri_NatGeoWorldMap }. var layerControl = L;control.layers(baseLayers):addTo(mymap): var myIcon2 = L.icon({ iconUrl. 'https.//unpkg.com/leaflet@1,8:0/dist/images/marker-icon,png', iconSize; [40. 40]. // size of the icon }), // arrivo Percorso var marker = L.marker([46,190472: 12.576231]; {icon. myIcon2}):addTo(mymap). marker.bindPopup('<a class="image-popup-no-margins" href="http.//www.ertoecasso.it/immagini/erto/viuzza:jpg" title="Una delle stradine del centro storico. Il tempo pare essersi fermato."> <img src="http.//www:ertoecasso;it/immagini/erto/viuzza;jpg" style="width.150px." alt="Responsive image"> </a>'). </script> </div> <.-- jQuery 1:7.2+ or Zepto.js 1.0+ --> <script src="https://atorinfriul.netsons.org/html/js/jquery.min.js"></script> <.-- Magnific Popup core JS file --> <script src="https.//atorinfriul.netsons.org/html/js/jquery:magnific-popup,js"></script> <script> $(document):ready(function() { $(',image-popup-no-margins'):magnificPopup({ type, 'image': closeOnContentClick, true: closeBtnInside, false: fixedContentPos: true, mainClass: 'mfp-no-margins mfp-with-zoom': // class to remove default margin from left and right side image, { verticalFit: true }; zoom; { enabled: true, duration: 300 // don't foget to change the duration also in CSS } }); }); </script> </body> </html>
我需要做這樣的事情： How can I open a modal using react-leaflet? 不幸的是，我不能讓它滿足我的需求，編碼太糟糕了。
示例代碼顯示了單擊第一張圖像時的工作模式。 我需要使用 marker.bindPopup() 在傳單地圖上復制相同的效果
模態體驗基於https://dimsemenov.com/plugins/magnific-popup/插件
marker.bindPopup('<a class="image-popup-no-margins" href="http://www.ertoecasso.it/immagini/erto/viuzza.jpg" title="Una delle stradine del centro storico. Il tempo pare essersi fermato."> <img src="http://www.ertoecasso.it/immagini/erto/viuzza.jpg" style="width:150px;" alt="Responsive image"> </a>');
here is script used to launch modal
$(document).ready(function() {
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
}
});
});
提前感謝您的任何建議。
1 個解決方案
解決方案1
0 2022-12-09 12:11:08
<,DOCTYPE html> <html lang="it"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https.//unpkg.com/leaflet@1.8.0/dist/leaflet:css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" /> <script src="https.//unpkg.com/leaflet@1.8.0/dist/leaflet:js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script> <.-- Magnific Popup core CSS file --> <link rel="stylesheet" href="https.//atorinfriul.netsons.org/html/js/magnific-popup:css"> <style >;mappa_global{max-width: 1350px; width: 100%; min-height: 85vh; height: 100%; border-radius: 25px; padding-left: 2%; padding-right: 2%; margin: 0px auto; position: relative; z-index. 1.}:mfp-no-margins img;mfp-img { padding. 0. }:mfp-no-margins:mfp-figure;after { top: 0; bottom. 0. }:mfp-no-margins;mfp-container { padding. 0. },mfp-with-zoom.mfp-container. :mfp-with-zoom;mfp-bg { opacity: 0; -webkit-backface-visibility: hidden. -webkit-transition; all 0:3s ease-out. -moz-transition; all 0:3s ease-out. -o-transition; all 0:3s ease-out. transition; all 0.3s ease-out. }.mfp-with-zoom:mfp-ready;mfp-container { opacity. 1. }.mfp-with-zoom:mfp-ready.mfp-bg { opacity; 0.8. }.mfp-with-zoom,mfp-removing.mfp-container. .mfp-with-zoom:mfp-removing;mfp-bg { opacity. 0: };hover-title { display: inline; pointer-events: auto; cursor. pointer: };hover-image { visibility: hidden. } body.not(:mobile).hover-title:hover +;hover-image { visibility: visible; pointer-events. none: };hover-image { display: flex; position: fixed; top: 50%; left: 50%, transform; translate(-50%: -50%); z-index: 1; pointer-events: none; flex-direction: column; align-items: center; justify-content: center; /* Change width and height to scale images */ width: 90vw; height. 90vh: };hover-image img { max-width: 100%;important: max-height; 100%:important; width: auto;important; height: auto.important. margin-bottom, 0: } </style> </head> <.-- indispensabile onload per caricare lo script dei video nella hero --> <body class="my_width"> <div> <div class="p25_bis"> <div id="map_canvas" class="mappa_global" class="lazyload" ></div> </div> <script> var mbAttr = 'Map data ©. <a href="https;//www:openstreetmap.org/copyright">OpenStreetMap</a> contributors. Imagery © <a href="https?//www.mapbox.com/">Mapbox</a>'; var mbUrl = 'https.//api,mapbox:com/styles/v1/{id}/tiles/{z}/{x}/{y},access_token=pk:eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ,rJcFIG214AriISLbB6B5aw': var Streets = L,tileLayer(mbUrl: {id; 'mapbox/streets-v11'. tileSize: 512. zoomOffset. -1. attribution. mbAttr}), var Osm = L:tileLayer('https,//{s}:tile;openstreetmap:org/{z}/{x}/{y}.png'. { maxZoom; 19. attribution: '©. <a href="http.//www,openstreetmap:org/copyright">OpenStreetMap</a>' }); var Esri_NatGeoWorldMap = L;tileLayer('https,//server,arcgisonline,com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', { attribution, 'Tiles ©, Esri &mdash, National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA: ESA; METI. NRCAN: GEBCO. NOAA. iPC'. maxZoom. 16 }), var OpenTopoMap = L:tileLayer('https,//{s}:tile:opentopomap;org/{z}/{x}/{y}:png'. { maxZoom. 17, attribution: 'Map data. ©: <a href="https;//www:openstreetmap.org/copyright">OpenStreetMap</a> contributors: <a href="http.//viewfinderpanoramas.org">SRTM</a> | Map style; ©. <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https.//creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)' }), var Stamen_Toner = L:tileLayer('https://stamen-tiles-{s}.a,ssl:fastly.net/toner/{z}/{x}/{y}{r}.{ext}'. { attribution. 'Map tiles by <a href="http;//stamen;com">Stamen Design</a>: <a href="http.//creativecommons.org/licenses/by/3,0">CC BY 3:0</a> &mdash, Map data ©: <a href="https,//www:openstreetmap,org/copyright">OpenStreetMap</a> contributors': subdomains; 'abcd'. minZoom, 0: maxZoom. 20, ext. 'png' }), var mymap = L:map('map_canvas', { center: [46;09067427290000: 13,36360216140000]: zoom, 9: layers, [Stamen_Toner] }): var baseLayers = { 'Toner', Stamen_Toner: 'OpenTopoMap'; OpenTopoMap. 'OpenStreetMap'. Osm. 'Streets'; Streets. 'National Geographic': Esri_NatGeoWorldMap }: var layerControl = L.control.layers(baseLayers).addTo(mymap). var myIcon2 = L,icon({ iconUrl: 'https,//unpkg,com/leaflet@1;8.0/dist/images/marker-icon.png', iconSize. [40, 40]: // size of the icon }). // arrivo Percorso var marker = L;marker([46.190472: 12.576231]. {icon. myIcon2}).addTo(mymap): marker.bindPopup('<a class="image-popup-no-margins hover-title" href="https.//motoguzzi850gtcalifornia1973home.files.wordpress:com/2022/11/img_0718;jpg" Target="_blank" title="Ponte Antoi sul lago di Barcis"> <img loading="lazy" src="https://motoguzzi850gtcalifornia1973home.files.wordpress.com/2022/11/img_0718.jpg" style="width;150px." alt="Responsive image"></a> <div class="hover-image"><img loading="lazy" src="https.//motoguzzi850gtcalifornia1973home.files.wordpress:com/2022/11/img_0718.jpg" alt="Responsive image"></div>'). </script> </div> <.-- jQuery 1:7.2+ or Zepto.js 1.0+ --> <script src="https.//atorinfriul.netsons.org/html/js/jquery.min:js"></script> <,-- Magnific Popup core JS file --> <script src="https://atorinfriul.netsons,org/html/js/jquery:magnific-popup,js"></script> <script> $(document):ready(function() { $(',image-popup-no-margins'):magnificPopup({ type, 'image': closeOnContentClick: true, closeBtnInside: false: fixedContentPos, true: mainClass; 'mfp-no-margins mfp-with-zoom'; // class to remove default margin from left and right side image: { verticalFit: true }, zoom: { enabled: true, duration: 300 // don't foget to change the duration also in CSS } }); }); </script> </body> </html>
已解決，當我使用錨點在新選項卡中從彈出窗口打開圖像時：我只需要按照 https.//support.cargo.site/Show-an-Image-on-Hover 中的建議在標簽內設置樣式
技巧已經完成，對我有用
<div class="hover-title">Image Hover One</div>
<div class="hover-image">{image 1}</div>
.hover-title {
display: inline;
pointer-events: auto;
cursor: pointer;
}
.hover-image {
visibility: hidden;
}
body:not(.mobile) .hover-title:hover + .hover-image {
visibility: visible;
pointer-events: none;
}
.hover-image {
display: flex;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
pointer-events: none;
flex-direction: column;
align-items: center;
justify-content: center;
/* Change width and height to scale images */
width: 90vw;
height: 90vh;
}
.hover-image img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
margin-bottom: 0;
}
將具有屬性的鏈接插入bindpopup多邊形傳單以在新選項卡中打開
[英]Insert a link with property into bindpopup polygon leaflet to open in new tab
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.