英文:
Leaflet marker numbers appearing to high on marker
问题
在这张1.9.2版本的传单地图https://net-control.us/mapcopy.php中，标记号码位于标记的上方而不是内部的孔中。典型的标记定义如下：
var _WA0TJT = new L.marker(new L.latLng(39.2028965,-94.602876),{
rotationAngle: 0,
rotationOrigin: 'bottom',
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{ text: '点击这里添加里程圈', callback: circleKoords}],
icon: new L.NumberedGreenDivIcon({number: '5' }),
title:`marker_5` }).addTo(fg).bindPopup(`
<div class='cc' style='text-transform:uppercase;'>5<br><b>WA0TJT</b><br> ID: #000013<br>Keith Kaiser<br>Platte Co., MO Dist: A<br>39.2028965, -94.602876<br>EM29QE<br><a href='https://what3words.com/guiding.confusion.towards?maptype=osm' target='_blank'>///guiding.confusion.towards</a></div><br><br>
<div class='cc'> <a href='http://www.findu.com/cgi-bin/map-near.cgi?lat=39.2028965&lon=-94.602876&cnt=10' target='_blank'>附近的APRS站点</a></div><br><br>
`).openPopup();
$(`_WA0TJT`._icon).addClass(`greenmrkr`);
stationMarkers.push(_WA0TJT);
最初编写时，这个问题没有发生，几个月前开始出现。我已经查看了每个CSS和标记定义，以解决这个问题。如果您有带宽，请查看并给我建议如何修复。
英文:
In this leaflet@1.9.2 map https://net-control.us/mapcopy.php the marker number is on top of the marker instead of inside the hole for it. A typical marker definition looks like this;
var _WA0TJT = new L.marker(new L.latLng(39.2028965,-94.602876),{
rotationAngle: 0,
rotationOrigin: 'bottom',
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{ text: 'Click here to add mileage circles', callback: circleKoords}],
icon: new L.NumberedGreenDivIcon({number: '5' }),
title:`marker_5` }).addTo(fg).bindPopup(`
<div class='cc' style='text-transform:uppercase;'>5<br><b>WA0TJT</b><br> ID: #000013<br>Keith Kaiser<br>Platte Co., MO Dist: A<br>39.2028965, -94.602876<br>EM29QE<br><a href='https://what3words.com/guiding.confusion.towards?maptype=osm' target='_blank'>///guiding.confusion.towards</a></div><br><br>
<div class='cc'> <a href='http://www.findu.com/cgi-bin/map-near.cgi?lat=39.2028965&lon=-94.602876&cnt=10' target='_blank'>Nearby APRS stations</a></div><br><br>
`).openPopup();
$(`_WA0TJT`._icon).addClass(`greenmrkr`);
stationMarkers.push(_WA0TJT);
When first written the problem wasn't happening, it started some months back. I've looked at every CSS and marker definition to fix it. If you have the bandwidth please take a look and give me a suggestion how to fix.
答案1
得分: 0
.leaflet-marker-icon .number {
position: relative;
top: -44px;
font-size: 12px;
width: 25px;
text-align: center;
}
更改为
.leaflet-marker-icon .number {
position: fixed;
top: 7px;
font-size: 12px;
width: 25px;
text-align: center;
}
英文:
I don't know what happened there but, element <div class="number">12</div> has styles
.leaflet-marker-icon .number {
position: relative;
top: -44px;
font-size: 12px;
width: 25px;
text-align: center;
}
change to
.leaflet-marker-icon .number {
position: fixed;
top: 7px;
font-size: 12px;
width: 25px;
text-align: center;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论