Leaflet OSM Marker Popup Positioning

Question

我正在使用OpenStreetMap工作地图网站，而我使用的是图像标记，而不是默认图像标记。放大或缩小地图时的第一个问题，标记的位置略有变化......所以我使用L.point设置锚点。然而，连锁反应也发生了，这张照片描述了这一点：

Popup覆盖了标记，并且定位似乎不正确。有什么建议如何修改弹出窗口的观点？这是我的代码：

var locations = data;

for ( var i=0; i < locations.length; i++) {

    if (locations[i][0] == 'panic') {
        var icon = L.icon({iconUrl:"{{asset('assets/splash4.gif')}}", iconAnchor: new L.Point(36,41) });

        var marker = L.marker( [locations[i][1], locations[i][2]], {icon: icon});

        marker.bindPopup( locations[i][5] + " <br>" + locations[i][6] + " <br>" + locations[i][7] + " <br><br>" + locations[i][3] + " <br>" + locations[i][4] ).addTo( map );

        if(i == locations.length - 1){

            map.setView(new L.LatLng(locations[i][1], locations[i][2]), 18);

            marker.bindPopup(locations[i][5] + " <br>" + locations[i][6] + " <br>" + locations[i][7] + " <br><br>" + locations[i][3] + " <br>" + locations[i][4]).openPopup().addTo( map );
        }

    } else {
        var icon2 = L.icon({iconUrl:"{{asset('assets/opmarkerblue1.png')}}", iconAnchor: new L.Point(0,32)});

        var marker = L.marker( [locations[i][1], locations[i][2]], {icon: icon2});

        marker.bindPopup( locations[i][5] + " <br>" + locations[i][6] + " <br>" + locations[i][7] + " <br><br>" + locations[i][3] + " <br>" + locations[i][4] ).addTo( map );
    }
}

任何帮助表示感谢。

Answer 1

在实例化L.Icon时使用popupAnchor选项。这是另一个L.Point，其像素坐标相对于iconAnchor 。

tutorial for custom marker icons还解释了L.Icon的选项如何运作。