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

Используйте опцию popupAnchor при создании экземпляра L.Icon. Это еще один L.Point с координатами пикселей относительно iconAnchor.

tutorial for custom marker icons также объясняет, как работают функции для L.Icon.