个人中心
gpt4 book ai didi

css - 在移动或单击 map 之前，Leaflet 不会在 IE/Safari 中显示 Control.extend 数据

转载 作者：行者123 更新时间：2023-11-28 14:58:00 25 4
gpt4 key购买 nike

Leaflet 在 IE 和 safari 中不显示 Control.extend 数据。IE 在 map 上移动后显示计数器框。单击后 Safari 会显示该框。

对于我的第二次扩展(弹出)，safari 需要在标记上单击 2 次。IE 只会在按住鼠标按钮时显示它。

预期结果:

This is how it should look like

Chrome、Edge 和 Firefox 运行良好。

修改后的代码:

 <!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>Bee-Idees kaart</title>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />

<script type='text/javascript' src='https://unpkg.com/leaflet@1.3.1/dist/leaflet.js'></script>
<script type='text/javascript' src='https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js'></script>
<script type='text/javascript' src='https://unpkg.com/leaflet.featuregroup.subgroup@1.0.2/dist/leaflet.featuregroup.subgroup.js'></script>
</head>
<style>
.my-custom-counters {
    padding: 10px 10px;
    background: #7ab51d;
    color: #000;
    font-size: 11px;
    line-height: 11px;
    width: 310px;
    border-radius: 15px;
    border-style: solid;
    border-color: #3A8D45;
    border-width: 1px;
    opacity: 0.85;
}
.my-custom-counters .ImpactHeader {
    color: #fff;
    line-height: 14px;
   text-align: center;
   font-weight: 600;
   margin-bottom: 5px;
}

.my-custom-counters .ImpactLead {
font-weight: 500;
}

.my-custom-counters .ImpactCount {
    text-align: right;
    font-weight: 600;
}

.my-custom-counters .ImpactEnd {
    font-weight: 500;
}

.my-custom-counters:empty {
    display: none;
}
</style>

<body>
<div id="map" style="height: 580px; border: 1px solid #AAA;"></div>
</body>

<script>
markers = [
{
    "name": "Gouda 3",
    "lat": 52.021616,
    "lng": 4.687917, 
    "marker": "red"
}
];
</script>  

<script>
var iconBase = 'css\\icons\\';
// Standard fields
var groupLabel = [];
groupLabel[0] = "Red";

var map = L.map('map', {
center: [52.021616, 4.85],
zoom: 10
});

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>',
subdomains: ['a', 'b', 'c']
}).addTo(map);

var mcg = L.markerClusterGroup(),
group0 = L.featureGroup.subGroup(mcg),
control = L.control.layers(null, null, { collapsed: false }), i, a, title, m; 
mcg.addTo(map);

var markerClusters = L.markerClusterGroup();

for (var i = 0; i < markers.length; ++i) {
var iconName = iconBase + markers[i].marker + ".png";
var myIcon = L.icon({ iconUrl: iconName, iconAnchor:   [20, 40] }) 
var popup = '<h2>' + markers[i].name + '</h2>';

var m = L.marker( [markers[i].lat, markers[i].lng], {icon: myIcon, title: markers[i].name} )
              .bindPopup( popup );

if (markers[i].marker === "red") { m.addTo(group0);} 
}

control.addOverlay(group0, groupLabel[0]);
control.addTo(map);

group0.addTo(map); 

map.addLayer(mcg);
var MyCounters = L.Control.extend({
    options: {
        position: 'bottomright'
    },
    onAdd: function (map) {
        return L.DomUtil.create('div', 'my-custom-counters');
    },
    setContent: function (content) {
        this.getContainer().innerHTML = content;
    }
});
myCounters = new MyCounters().addTo(map);
showCounters();

function showCounters() {
impact = '<div class="ImpactHeader">TOTAAL GEMETEN IMPACT VAN ALLE PROJECTEN<br>ZICHTBAAR OP DE KAART<br> </div> <div class="undefined"> <table style="width:100%;"> <tr> <td> <div class="ImpactLead">Winst besteed aan kansarmen : </div> </td> <td> <div class="ImpactCount">275 </div> </td> <td> <div class="ImpactEnd">€ (Euro) </div> </td> </tr><tr> <td> <div class="ImpactLead">Toegang tot financiële diensten: </div> </td> <td> <div class="ImpactCount">176 </div> </td> <td> <div class="ImpactEnd">Personen </div> </td> </tr><tr> <td> <div class="ImpactLead">Veilig en gezond voedsel: </div> </td> <td> <div class="ImpactCount">250 </div> </td> <td> <div class="ImpactEnd">Personen </div> </td> </tr></table> </div>'
myCounters.setContent(impact);
}
</script>
</html>

似乎 IE 无法处理添加更复杂的字符串来扩展。

最佳答案

您的自定义控件最初是空的。

如果你想让它们从一开始就被填满，你至少应该调用你的showCounters在您将计数器控件添加到 map 后立即运行。与您的弹出控件相同。

对于后者，您使用 popup选项，buildPopupinfo函数和几个变量( Maps ， Markers 和 popup )，你没有解释/显示你如何分配它们。问题很可能出在这些方面。

使用新代码编辑问题后:

嗯，你似乎遇到了 :empty 的 IE 错误CSS 伪选择器并用 innerHTML 动态填充元素.

似乎用单个 外部元素(如 <div> )简单地包装您的 HTML 内容可以避免此错误:

// The "one" Element is filled with a SINGLE child (but it can have many grand children)
document.getElementById('one').innerHTML = '<div> <div>one</div> <div>one</div> </div>';

// The "two" Element is filled with 2 children nodes
// Try clicking somewhere else on the page to "reveal" it
document.getElementById('two').innerHTML = '<div>two</div><div>two</div>';
.auto-hide {
  background-color: green;
  border: 1px solid black;
  width: 100px;
  height: 40px;
}

.auto-hide:empty {
  display: none;
}
<div id="one" class="auto-hide"></div>
<div id="two" class="auto-hide"></div>

我猜你的弹出窗口有类似的 CSS 规则，因此有类似的行为。

我完全无法使用上述代码片段或问题中提供的代码在 Safari (11.1) 上重现该问题:

https://plnkr.co/edit/YDbSFQeaUYtVBadKnnbU?p=preview

关于css - 在移动或单击 map 之前，Leaflet 不会在 IE/Safari 中显示 Control.extend 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50672463/

25 4 0
文章推荐： css - 在内容中添加空间的链接
文章推荐： jquery - 如何使用 Jquery 对图像进行平滑的自动放大？
文章推荐： javascript - 在 IE6 中应用透明 PNG 的 AlphaImageLoader
文章推荐： ios - 从日期选择器开始的 Swift CountDown 天数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com