回答:
マーカーのポップアップを表示する必要がある場合は、マーカーのbindPopupメソッドを使用できます。
その後、より多くの制御が可能になり、マーカーに自動的にバインドされます。
以下の例では、ユーザーがマウスオーバーするとポップアップを表示し、ユーザーがマウスアウトするとポップアップを非表示にできます。
marker.bindPopup("Popup content");
marker.on('mouseover', function (e) {
this.openPopup();
});
marker.on('mouseout', function (e) {
this.closePopup();
});
注:ポップアップ自体にマウスを合わせるとポップアップが閉じる問題が発生する可能性があるため、ポップアップアンカーを調整して(ポップアップ設定を参照)、ポップアップがマーカー自体から少し離れて表示されるようにする必要があります簡単に消えます。
これはリーフレット固有の問題ではなく、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));
}
L.MarkerCluster
インスタンス内のマーカーを反復処理する方法を求めています...私の答えは、ホバーでポップアップのコレクションをバインドする方法を明確に示しています。クラスターからコレクションを取得する方法を知りたい場合、これは別のものです。
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");
bindTooltip()
個々のマーカーでも機能します。
「より多くのマーカーに対して」機能するソリューションを持つという点で、これは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;
}
});