leaflet.js api圖標：爲什麼iconAnchor和popupAnchor具有不同的座標位置

Question

如果我按照以下方式配置傳單圖標，則彈出窗口位於圖標的左上角。

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

此外，使用此設置，我不確定圖標錨位於latlng位置。

我假設座標被接受爲x，y，儘管我沒有發現這種說法。

我寧願知道的東西，而不是如何完成某件事。

圖標座標系內的哪個位置是圖標的錨點？左上角，中心等等？

圖標的定位點還是它的0,0點？

圖標座標系中的哪個位置是彈出窗口的錨點？

彈出窗口的錨點也是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]); 

這標誌「點」在實際的緯度和經度，這是標記圖像的左上角。

彈出窗口非常相似，這裏是我們原始標記上的基本彈出窗口的小提琴。 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] 
}); 

希望這有助於！