icons - Leaflet.js api 图标 : why do iconAnchor and popupAnchor have different coordinate locations

Question

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

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

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

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

我宁愿知道某事而不是如何完成某事。

图标的坐标系中图标的 anchor 在哪里？左上角，中心等？

图标的 anchor 也是它的 0,0 点吗？

弹出窗口的 anchor 在图标坐标系中的哪个位置？

弹出窗口的 anchor 也是它的 0,0 点吗？

图标的 anchor 和弹窗的 anchor 的坐标关系是什么？

Answer 1

默认情况下，当您为标记提供图标时，图像将在您提供的经纬度处以图像的左上角绘制。 iconAnchor 允许您定位图像，使其指向正确的区域(无论您的图像是什么)

这是显示此 http://jsfiddle.net/GX9bh/1/ 的 fiddle
第一个标记有 [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]);

该标记“指向”实际经纬度，即标记图像的左上角。

弹出窗口非常相似，这是我们原始标记上的基本弹出窗口的 fiddle 。 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 个像素(奇怪)。这是一个 fiddle http://jsfiddle.net/GX9bh/4/

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

因为我知道图像是 25px X 41px，所以我想将图标偏移 [12, 41] 以便中心(图像指向的地方)指向实际的纬度，同样我希望弹出窗口直接在那个，所以它应该被 [0, -41] 偏移，所以它就在弹出窗口的上方(它已经居中了)。当然，这是 fiddle : 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]
});

希望这有帮助!