2016-09-08 12 views
0

ポップアップを角膜のリーフレットにホバーとして開き、クリックしないようにします。リーフレットのポップアップをホバーとして開き、クリックしないようにするには

私はマーカー配列を初期化し、ベースレイヤーの上にレイヤーのオーバーレイを持っています。

私は、バスとバス停が互いに属しているレイヤーを作成しようとしています。したがって、各レイヤーはオーバーレイ内の同じタイプに属します。

私はコード

markers = []; 
markers.push(
{ layer : layername, 
      lat : latitude, 
      lng : longitude, 
      message: busNames(data), 
    icon :{....} 
} 
}); 

を使用しています、私はバス停のデータを構築し、同じ層の上に設定され、別のプッシュマーカーを持っています。マウスではなくクリックで

P.Sをそれらを示すのホバーとして、それらの上に移動したときに

は今どのように私は、ポップアップを表示しない - 私は、コードに新しいですので、さらに進んで私を助けてください。

答えて

2

作成しているマーカーごとに、 'mouseover'イベントと 'mouseout'イベントを聞く必要があります。

'mouseover'が送信されたときにポップアップを開き、 'mouseout'が送信されたときに閉じます。ここで

var marker = L.marker([51.5, -0.09]).addTo(map); 
    var tooltipPopup; 

    marker.on('mouseover', function(e) { 
    tooltipPopup = L.popup({ offset: L.point(0, -50)}); 
      tooltipPopup.setContent("Hello"); 
      tooltipPopup.setLatLng(e.target.getLatLng()); 
      tooltipPopup.openOn(map); 

    }); 

    marker.on('mouseout', function(e) { 
     map.closePopup(tooltipPopup); 
    }); 

はまずexample

+0

リーフレットだけではなく、Angular Leafletを使用しているので、上記の例で使用されている「メッセージ」がポップアップを作成します。だから、どうすればいい? – user6591323

1

である、あなたはそれがあなたのマーカーに「マウスオーバー」と「マウスアウト」イベントを追加した後、お使いのコントローラに「leafletData」を含める必要があります。

angular 
.module('myapp') 
.controller("EventsController", [ '$scope', 'leafletData', function($scope, leafletData) { 

    $scope.$on('leafletDirectiveMarker.mouseover', function(event, args){ 
    console.log('I am over!'); 
    var popup = L.popup({ offset: L.point(0, -28)}) 
       .setLatLng([args.model.lat, args.model.lng]) 
       .setContent(args.model.message) 
    leafletData.getMap().then(function(map) { 
     popup.openOn(map); 
    }); 
    }); 

    $scope.$on('leafletDirectiveMarker.mouseout', function(event){ 
    leafletData.getMap().then(function(map) { 
     map.closePopup(); 
    }); 
    }); 
}]); 
関連する問題