更改Leaflet标记上的弹出位置？

14

我想在Leaflet的标记图标底部打开一个弹出窗口。

我的代码：

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);

var lati = 51.51;
var longi = -0.09;

var popupLocation1 = new L.LatLng(lati, longi);
var popupContent1 = 'This is a nice popup';

popup1 = new L.Popup();
popup1.setLatLng(popupLocation1);
popup1.setContent(popupContent1);

var m1 = L.marker([ lati, longi ]).addTo(mymap);

m1.bindPopup(popup1);

m1.openPopup();

所以我在标记上方弹出了一个窗口。

我想在底部弹出一个窗口，例如：

leaflet popup

— 格尔德
source

请查看此Q / A，stackoverflow.com

— questions

您的链接上没有有效的解决方案。也许这句话是对的：“您可以做的就是钩住标记的点击并使用自定义代码绘制自己的弹出窗口”底部弹出窗口没有简单的方法吗？

— 盖德

1

关于标记下方的弹出式问题，当前情况与Artwork21的评论链接相同。请参阅FranceImage的答案（stackoverflow.com/a/27144900/5108796）与建议的插件。您可以使用该插件或从中获取灵感来构建自己的自定义弹出窗口。

— ghybs

我们不能在弹出窗口本身的CSS位置中这样做吗？因为默认情况下是从底部开始引用的，所以如果我们切换到顶部，则无论选择的字体/字体大小/行高以及文本的行数如何，它都是正确的（最大固定偏移量）？我可能忽略了一些东西。

— user3445853 19/12/19

4

您可以使用popupAnchor选项指定偏移量，但不能指定偏移量。首先，您需要指定一个像这样的图标：

var myIcon = L.divIcon({ popupAnchor: [0, -30] });

然后，您可以在标记选项中使用此图标：

var marker = L.marker(location, {
                 icon: myIcon
             }).bindPopup(function (marker) {...}); //Shortened

现在，您的弹出窗口在标记上方打开了30像素。这并不是您所要的，因为您还需要将小箭头三角形放在弹出窗口的顶部，但是我仍然值得一提。

— 亚历克斯
source

与@Johannes的最新[2019年8月29日]回答相同的问题：此偏移量是错误的，因为弹出窗口中还有第二行或更多行文本；或CSS中的更改（字体大小，字体，行高，填充，边距，弹出窗口大小...）。因此，最初的答案是“没有本机解决方案”。

— user3445853 19/12/19

3

没有本地的传单解决方案。

另一种方法是使用https://github.com/erictheise/rrose

不错的演示：

http://jsfiddle.net/asleepwalker/6m81vtad/

— 格尔德
source

3

我知道这是一个古老的问题，但是您无需绕过他在回覆中描述的@Robert。

由于Popup是继承DivOverlay，你可以在初始化时直接设置偏移选项Popup：

    var popup = L.popup({
        offset: [0, -30]
    })
      .setLatLng(location)
      .setContent("Test Text")
      .openOn(mapId);

阅读文档：https : //leafletjs.com/reference-1.5.0.html#popup

— 约翰尼斯
source

这种方法的问题在于，偏移量具有不可思议的数字：如果字体大小或字体甚至行高发生变化，则偏移量很差。更成问题的是，如果某些弹出窗口包含第二行（或第三行等）的文本，则它们现在的行高（或两行等）太高了，可能完全重叠了标记及其附近。您可能需要测量弹出窗口中文本的高度，并动态更改偏移量，并在渲染期间/之后使用JS移动它；或使用非常固定的CSS，并在添加标记之前在传单地图中进行计算。

— user3445853 19/12/19

1

这似乎仅在CSS中是可能的。在下面，我!important仅重写了三个CSS元素，并添加了一个:before伪元素。我本质上首先要使弹出窗口的顶部（而不是底部）排列起来，55px 这取决于您选择的标记和个人喜好。

然后，我将弹出窗口的“提示”从底部类似地移动到top:0px，发现它不是使用“正常”技巧完成的（即：在气泡边缘的第一个位置是一个0x0大小的伪元素，带有透明的粗边框，然后给该颜色上色元素与您要指向的位置的相对边界；在本例中为底部边界）。相反，它似乎是由一个从左上角旋转的矩形制成的（也许是因为它迫使浏览器使用GPU 并因此加速了所有操作？），而我对此的理解还不够（请原谅）。我的提示在正确的位置但看不见）；因此，我只需要删除错误位置的阴影并将其保持原样---理解“旧技巧”的任何人都请进行调整。

因此，我改为用“正常”过程做自己的提示（如果不确定，请更改下面的四种边框颜色，而不是3x透明和1x白色--- border-bottom-color: blue; border-left-color: green; border-top-color: yellow' border-right-color: red）。

#map {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   z-index: 0;
}
.leaflet-popup {top: 55px !important;}
/* Here I move the "tip" to the right location, but didn't succeed in making it visible. So I just remove the box-shadow and leave it: */
.leaflet-popup-tip-container {
   top: 0px !important;
}
.leaflet-popup-tip {
   box-shadow: none !important;
}
.leaflet-popup:before 
    {
    content: "";
    position: absolute;
    border: 13px solid transparent;
    border-bottom-color: white;
    bottom: 0px;
    margin-left: -13px;
}

正如此JSFiddle所演示的，如果您同时尝试两个标记，则弹出大小不同（宽度不同，文本高度不同）也不会出现问题。

总而言之，由于我覆盖的项目似乎不太可能更改，因此对于Leaflet中的更新而言，所有这些似乎都很可靠。

— 用户名
source