问题描述
我需要在页面上同时显示多个popper元素。但是问题是,当其中两个彼此靠近时,就会出现重叠。有办法解决这个问题吗?
我在下面提供与popper元素相关的代码。
我在传单内使用tippy.js。单张图像的特定坐标中有标记。当我单击这些标记时,我想在小费内显示一些html内容。当我想同时显示多个小费时,问题就开始了。感谢您的帮助。
var data = [
{
latLng: [160,-100],tippyContent: document.getElementById('exampleTable1').innerHTML,},{
latLng: [240,100],}
];
var map = L.map('map',{
crs: L.CRS.Simple,minZoom: 0,maxZoom: 0,zoomControl: false,dragging: false,attributionControl: false,autopan: false
});
map.scrollWheelZoom.disable();
map.doubleClickZoom.disable();
var yx = L.latLng;
var xy = function (x,y) {
if (L.Util.isArray(x)) { // When doing xy([x,y]);
return yx(x[1],x[0]);
}
return yx(y,x); // When doing xy(x,y);
};
var bounds = [xy(-120,-300),xy(120,300)];
var image = L.imageOverlay('https://static8.depositphotos.com/1022400/1002/i/950/depositphotos_10024914-stock-photo-vertical-beach.jpg',bounds).addTo(map);
var markers = [];
data.forEach(function (element,index) {
markers[index] = L.marker(element.latLng,{
draggable: false,autopan: false,}).addTo(map);
});
map.setView(xy(0,0),1);
data.forEach(function (element,index) {
tippy(markers[index]._icon,{
content: element.tippyContent,// diğer tippy metotları da eklenebilir.
trigger: 'mouseenter click',allowHTML: 'true',hideOnClick: 'toggle',maxWidth: 'none',interactive: 'true',placement: 'auto',appendTo: document.body,});
});
function showAllMarkersTippies() {
hideAllMarkersTippies();
markers.forEach(function (marker) {
marker._icon.click();
});
}
function hideAllMarkersTippies() {
markers.forEach(function (marker) {
marker._icon._tippy.hide();
});
}
#map {
height: 660px;
}
table {
font-family: arial,sans-serif;
border-collapse: collapse;
color:#333333
}
td,th {
border: 1px solid #dddddd;
text-align: left;
padding: 5px;
}
tr {
background-color: #fff;
}
<link href="https://github.com/mapshakers/leaflet-icon-pulse/blob/master/src/L.Icon.pulse.css" rel="stylesheet"/>
<link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/@popperjs/core@2.4.4/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6.2.6/dist/tippy-bundle.umd.js"></script>
<script src="https://raw.githubusercontent.com/mapshakers/leaflet-icon-pulse/master/src/L.Icon.pulse.js"></script>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<button type="button"
class="btn btn-secondary ml-3 pull-right"
onclick="hideAllMarkersTippies()">Hide All</button>
<button type="button"
class="btn btn-secondary ml-3 pull-right"
onclick="showAllMarkersTippies()">Show All</button>
<div id="exampleTable1" style="display:none;">
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds</td>
<td>Maria</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro com</td>
<td>Francisco</td>
<td>Mexico</td>
</tr>
</table>
</div>
<div id="map"></div>
结果图像如下所示。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)