リーフレットOSMマーカーポップアップポジショニング

Question

OpenStreetMapを使ってマップウェブサイトを作っています。私はデフォルトのイメージマーカーではなく、イメージマーカーを使用しています。ズームの最初の問題点は、マーカーの位置が少し変化しているので、L.pointを使ってアンカーポイントを設定します。

ポップアップがマーカーを覆い、ポジショニングはないと思える。しかし、連鎖反応が、この絵で説明され、ポップアップ表示することも起こりました。どのようにポップアップのポイントを修正するための任意の提案？ここに私のコード：

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オプションを使用してください。それはiconAnchorに対してピクセル座標がの別のL.Pointです。

tutorial for custom marker iconsは、L.Iconのオプションの仕組みについても説明しています。