Question

如果我按以下方式配置传单图标，弹出窗口将固定在图标的左上角。

iconUrl: 'images/Flaticon_10030-16px.png',
iconAnchor: [0,0],
popupAnchor: [0,0]

此外，使用此设置，我不确定图标锚点是否位于latlng位置。

我假设坐标被接受为x，y，尽管我发现没有说明。

我更愿意知道一些事情而不是如何完成某事。

图标坐标系中的哪个位置是图标的锚点？左上角，中间等？

图标的锚点也是0点吗？

图标坐标系中的哪个位置是弹出窗口的锚点？

弹出窗口的锚点也是0点吗？

图标的锚点与弹出窗口的锚点之间的坐标关系是什么？

Answer 1

默认情况下，当您向标记提供图标时，将使用您提供的图像的左上角图像来绘制图像。 iconAnchor允许您定位图像，使其指向正确的区域（无论您的图像是什么）

这是一个显示这个http://jsfiddle.net/GX9bh/1/的小提琴第一个标记有[0,0] iconAnchor，因此图像的左上角指向伦敦，第二个标记指向[100,100]，因此向上和向左每个方向100个像素。

var icon_normal = new L.icon({
    iconUrl: 'http://cdn.leafletjs.com/leaflet-0.6.4/images/marker-icon.png',
    iconAnchor: [0, 0]
});
var icon_offsetted = new L.icon({
    iconUrl: 'http://cdn.leafletjs.com/leaflet-0.6.4/images/marker-icon.png',
    iconAnchor: [100, 100]
});
var marker = new L.Marker([51.505, -0.09], {
    icon: icon_normal
});
var marker2 = new L.Marker([51.505, -0.09], {
    icon: icon_offsetted
});

请注意，如果您未提供任何图标，则该传单正在处理此问题。您可以使用以下代码查看：http://jsfiddle.net/GX9bh/2/

var marker3 = new L.Marker([51.505, -0.09]);

此标记“指向”实际lat lng，即标记图像的左上角。

弹出窗口非常相似，这里是我们原始标记上的基本弹出窗口的小提琴。 http://jsfiddle.net/GX9bh/3/

var popup = L.popup()
    .setContent('<p>Hello world!<br />This is a nice popup.</p>');
marker.bindPopup(popup).openPopup()

你会注意到它也指向默认的原始latlng！但如果我们有popupAnchor，我们可以调整它。

    popupAnchor: [100, 100]

但是对于这个家伙来说，它向下并且在每个方向向右下方100个像素（奇怪）。这是一个小提琴http://jsfiddle.net/GX9bh/4/

所以你真的想知道你用于标记的图像的宽度和高度，所以你实际调整它。

因为我知道图像是25px X 41px，我想要将图标偏移[12,41]，以便中心（图像指向的位置）指向实际的latlng，同样我希望拥有直接弹出它，所以它应该被[0，-41]偏移，所以它刚刚超过弹出窗口（它已经居中）。当然，这就是小提琴：http://jsfiddle.net/GX9bh/5/

var icon_normal = new L.icon({
    iconUrl: 'http://cdn.leafletjs.com/leaflet-0.6.4/images/marker-icon.png',
    iconAnchor: [12, 41],
    popupAnchor: [0, -41]
});

希望这有帮助！

leaflet.js api图标：为什么iconAnchor和popupAnchor具有不同的坐标位置

1 个答案: