Question

我想在地图中添加一个文字，在缩放变化时不会缩放，并保留其原始尺寸。

我使用此代码（javascript）：

var text = new L.marker(rect.getBounds().getSouthWest(), {opacity: 0.0001});
text.bindLabel("TEXT", styleProperties);
text.addTo(myLayer);

并获得此不需要的结果：

我希望在应用缩放时，文本保留为左侧第一个图像的大小。有可能吗？

编辑：文字必须像城市名称一样，随着地图一起移动但不会在缩放时改变它的大小（是的，我知道城市名称是图像，因为这不容易解决我的问题问题）。但是，谢谢你的回答，现在我保持了实验室，不是一个优雅的解决方案，但是有效。

Answer 1

据我了解，您希望根据缩放级别获得动态字体大小。正好与你提到的相反。

您可以根据缩放级别更改字体大小。对于Leaflet.Label插件，您可以为zoomend添加事件处理程序，并使用标签的字体大小和标签的其他样式进行播放。

我有另一个没有Leaflet.Label的例子，它在路径对象旁边添加了一个文本元素。因此文本嵌入在svg中，我根据缩放级别更改字体大小。虽然我找不到更好的功能。

https://embed.plnkr.co/hU6ip8T58tvE7CHJwniR/

Answer 2

使用带[this.required, ...].every(...)的标记。

Answer 3

您可以使用Leaflet.label插件（从Leaflet 1.0开始，L.Label作为L.Tooltip添加到Leaflet核心）。你可以用你自己的CSS设计它。请参阅example。

Answer 4

在我看来，您的文字与您的地图并不真正相关。如何在另一个div中添加地图容器中的文本？

<doctype html>
<html>
<head>
<title>Events</title>
<style>
	.event {
		background-color: #fff;
	}
</style>
<script>

</script>
</head>
<body>
	<ul class="row block-grid events">
		<li class="small-12 medium-6 large-4 column event">
			<dl>
				<dt><time date="2016-02-02">Feb 2</time></dt>
				<dd>Boston Public Library at 7:00pm</dd>
				<dd>Book launch</dd>
				<dd>Boston, MA</dd>
				<dd><a href="http://www.bpl.org">More details</a></dd>
			</dl>
		</li>
	</ul>
</body>
</html>

请参阅完整示例here

我可以在传单中找到固定文本吗？

4 个答案: