リーフレットマーカーのポップアップ位置を変更しますか？

Leafletのマーカーアイコンの下部にポップアップを開きます。

私のコード：

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);

var lati = 51.51;
var longi = -0.09;

var popupLocation1 = new L.LatLng(lati, longi);
var popupContent1 = 'This is a nice popup';

popup1 = new L.Popup();
popup1.setLatLng(popupLocation1);
popup1.setContent(popupContent1);

var m1 = L.marker([ lati, longi ]).addTo(mymap);

m1.bindPopup(popup1);

m1.openPopup();

そのため、マーカーの上にポップアップが表示されます。

私は下のようなポップアップを取得したい：

ネイティブのリーフレットソリューションはありません。

もう1つの方法は、https：//github.com/erictheise/rroseを使用することです

素敵なデモ：

http://jsfiddle.net/asleepwalker/6m81vtad/

popupAnchorオプションを使用してオフセットを指定できますが、予想される場所では指定できません。まず、次のようなアイコンを指定する必要があります。

var myIcon = L.divIcon({ popupAnchor: [0, -30] });

その後、マーカーオプションでこのアイコンを使用できます。

var marker = L.marker(location, {
                 icon: myIcon
             }).bindPopup(function (marker) {...}); //Shortened

これで、ポップアップがマーカーの30ピクセル上に開きます。ポップアップの上部に小さな矢印の三角形も配置する必要があるため、これはまさにあなたが求めたものではありませんが、まだ言及する価値があると思います。

これは古い質問であることは知っていますが、彼の返信で説明されている@Robertを迂回する必要はありません。

ASがPopup継承されてDivOverlay初期化するとき、あなたは直接オフセットオプションを設定することができますPopup：

    var popup = L.popup({
        offset: [0, -30]
    })
      .setLatLng(location)
      .setContent("Test Text")
      .openOn(mapId);

ドキュメントを読む：https : //leafletjs.com/reference-1.5.0.html#popup

これはCSSでのみ可能だと思われます。以下では!important、3つのCSS要素を（で）オーバーライドし、1つの:before擬似要素を追加しています。私は基本的に最初とポップアップ並んだトップの代わりの下、55px ちょうどあなたの選択したマーカーに依存しており、個人的な好みを。

次に、ポップアップの「ヒント」を同様に下からtop:0pxに移動し、「通常の」トリックを使用して作成されていないことを発見します（つまり、最初にバブルの端に0x0サイズの太い透明な境界を持つ擬似要素を配置し、あなたが指したい場所の要素の反対側の境界線;私たちの場合、下枠）。代わりに、左上からどこかに回転した長方形から作られているようです（おそらく、ブラウザにGPUを使用させて、 すべてを加速させるためですか？）と私は十分にポイントを取得しません（しゃれを許しません）私のヒントは正しい場所にありますが、見えません）; そのため、間違った場所にあるボックスシャドウを削除し、すべてそのままにしておきます。「古いヒント」を理解している人は調整してください。

そのため、代わりに「通常の」プロセスで独自のヒントを作成します（不明な場合は、3x透明および1x白ではなく、下の4つの境界線の色を変更します---例border-bottom-color: blue; border-left-color: green; border-top-color: yellow' border-right-color: red）。

#map {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   z-index: 0;
}
.leaflet-popup {top: 55px !important;}
/* Here I move the "tip" to the right location, but didn't succeed in making it visible. So I just remove the box-shadow and leave it: */
.leaflet-popup-tip-container {
   top: 0px !important;
}
.leaflet-popup-tip {
   box-shadow: none !important;
}
.leaflet-popup:before 
    {
    content: "";
    position: absolute;
    border: 13px solid transparent;
    border-bottom-color: white;
    bottom: 0px;
    margin-left: -13px;
}

このJSFiddleはあなたが両方のマーカーをしようとした場合、別のポップアップ・サイズ（異なる幅、異なるtextHeightと）に問題を示しません。

全般的に、これは、私がオーバーライドしているアイテムが変更される可能性が低いため、リーフレットの更新に対して堅牢であるようです。