Leaflet标记数字显示在标记上方太高。

huangapple go评论56阅读模式
英文:

Leaflet marker numbers appearing to high on marker

问题

在这个1.9.2版的地图中,标记号码位于标记的上方,而不是在标记的内部孔中。典型的标记定义如下:

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'>Nearby APRS stations</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: &#39;bottom&#39;,
    			contextmenu: true,
			    contextmenuWidth: 140,
			    contextmenuItems: [{ text: &#39;Click here to add mileage circles&#39;, callback: circleKoords}],  
			                 
icon: new L.NumberedGreenDivIcon({number: &#39;5&#39; }),
				title:`marker_5` }).addTo(fg).bindPopup(`
&lt;div class=&#39;cc&#39; style=&#39;text-transform:uppercase;&#39;&gt;5&lt;br&gt;&lt;b&gt;WA0TJT&lt;/b&gt;&lt;br&gt; ID: #000013&lt;br&gt;Keith Kaiser&lt;br&gt;Platte  Co., MO Dist: A&lt;br&gt;39.2028965, -94.602876&lt;br&gt;EM29QE&lt;br&gt;&lt;a href=&#39;https://what3words.com/guiding.confusion.towards?maptype=osm&#39; target=&#39;_blank&#39;&gt;///guiding.confusion.towards&lt;/a&gt;&lt;/div&gt;&lt;br&gt;&lt;br&gt;
&lt;div class=&#39;cc&#39;&gt; &lt;a href=&#39;http://www.findu.com/cgi-bin/map-near.cgi?lat=39.2028965&amp;lon=-94.602876&amp;cnt=10&#39; target=&#39;_blank&#39;&gt;Nearby APRS stations&lt;/a&gt;&lt;/div&gt;&lt;br&gt;&lt;br&gt;
                `).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

我不知道发生了什么,但元素 &lt;div class=&quot;number&quot;&gt;12&lt;/div&gt; 的样式已更改为:

.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 &lt;div class=&quot;number&quot;&gt;12&lt;/div&gt; 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;
}

huangapple
  • 本文由 发表于 2023年3月21日 01:55:09
  • 转载请务必保留本文链接:https://go.coder-hub.com/75793707-2.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定