Leafletを使用したクリックではなく、マウスオーバーでポップアップを表示しますか?


37

Leafletでは、クリックではなくマウスオーバーでポップアップが開く可能性はありますか?

これは一度に1つのマーカーに対してのみ機能しますが、より多くのマーカーに対して必要です。

marker.on('mouseover', function(e){
    marker.openPopup();
});

1
2つの質問がある場合は、2つのスレッドを開いて個別に回答できるようにしてください。
暗闇

回答:


43

マーカーのポップアップを表示する必要がある場合は、マーカーのbindPopupメソッドを使用できます。

その後、より多くの制御が可能になり、マーカーに自動的にバインドされます。

以下の例では、ユーザーがマウスオーバーするとポップアップを表示し、ユーザーがマウスアウトするとポップアップを非表示にできます。

        marker.bindPopup("Popup content");
        marker.on('mouseover', function (e) {
            this.openPopup();
        });
        marker.on('mouseout', function (e) {
            this.closePopup();
        });

注:ポップアップ自体にマウスを合わせるとポップアップが閉じる問題が発生する可能性があるため、ポップアップアンカーを調整して(ポップアップ設定を参照)、ポップアップがマーカー自体から少し離れて表示されるようにする必要があります簡単に消えます。


4
ポップアップをホバーするときにポップアップを表示したままにするためのソリューション-jsfiddle.net/sowelie/3JbNY
rob-gordon

9

これは、マーカーのマウスオーバーでポップアップを表示するのに役立ちます

marker.on('mouseover', function(e) {
  //open popup;
  var popup = L.popup()
   .setLatLng(e.latlng) 
   .setContent('Popup')
   .openOn(map);
});

1
ありがとう!このコードは、この質問に関係のない何かを助けてくれました。
アッバフェイ

6

これはリーフレット固有の問題ではなく、Javascriptの問題です。

コレクションにマーカーを保存し、すべてのマーカーのイベントにバインドopenPopup'mouseover'ます。

たとえば、配列の場合:

var markers = getAllMarkers(); // up to you to implement, say it returns an Array<L.Marker>

for (var i = 0; i < markers.length; i++) {
    var currentMarker = markers[i];
    currentMarker.on('mouseover', currentMarker.openPopup.bind(currentMarker));
}

答えではなくコメントでの意見:私は、カーソルが多くの場所をさまようマップ上でホバーオープンされたポップアップの使いやすさには疑問があると思います。ユーザーが本当にマーカー間でパスファインディングを行って最終的に目的のマーカーに到達するようにしたいのですが、ターゲットにカーソルを移動しようとすると常にポップアップの後ろに隠れますか?
MattiSG

残念ながら、これは私の選択ではありません。Leaflet MarkerClusterを使用して、新しいL.MarkerClusterGroupのようにマーカーを保存します:var marker = new L.MarkerClusterGroup(); あなたが書いたコーディングもそれで動作しますか?
アゲインストフロー

@againstflow Erm、質問を変更する必要があります。ホバーでマーカーを開くだけでなく、L.MarkerClusterインスタンス内のマーカーを反復処理する方法を求めています...私の答えは、ホバーでポップアップのコレクションをバインドする方法を明確に示しています。クラスターからコレクションを取得する方法を知りたい場合、これは別のものです。
MattiSG

6

Leaflet 1.3.xを使用している場合、ツールチップバインディングは組み込みメソッドです。

http://leafletjs.com/reference-1.3.0.html#tooltip

var polyline = L.polyline([[StartLat, StartLong],[EndLat,EndLong]]).addTo(this.map);
    polyline.bindTooltip("tool tip is bound");

1
素晴らしい。上記の「マウスオーバー」/「マウスアウト」ジッタを完全に回避します。
ニックK9

bindTooltip()個々のマーカーでも機能します。
S.バギー

4

「より多くのマーカーに対して」機能するソリューションを持つという点で、これはGeoJSONからロードされたポイントデータの各レイヤーに対して行うことです。

var layerPopup;
featureLayer.on('mouseover', function(e){
    var coordinates = e.layer.feature.geometry.coordinates;
    var swapped_coordinates = [coordinates[1], coordinates[0]];  //Swap Lat and Lng
    if (map) {
       layerPopup = L.popup()
           .setLatLng(swapped_coordinates)
           .setContent('Popup for feature #'+e.layer.feature.properties.id)
            .openOn(map);
    }
});
featureLayer.on('mouseout', function (e) {
    if (layerPopup && map) {
        map.closePopup(layerPopup);
        layerPopup = null;
    }
});

好奇心が強いのは、featureLayerとはどのタイプのオブジェクトですか?これは素晴らしい解決策のようです。
-Behr
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.