トリガー

が

こんにちは皆:)トリガー

私は二日間はなくせずに答えを見つけることを試みている（または私は「[これを読んでいました...]誰が？言うべき）リーフレット画層グループ内の単一のマーカー上のイベント成功した（私はまったく新しいユーザーである可能性が高い）LayerControlで管理できるように、レイヤーグループで編成されたリーフレットマップマーカーを使用していますので、マーカーをクリックするとイベントがトリガーされますこのマーカーの周りの特定の距離を表す円の作成）ユーザーが選択した距離に応じて、円の半径にいくつかのオプションを設定したいので、個々のマーカーの外側でそれを管理したいと考えています。

以下は、私が何を意味するのかを示すさまざまなコードです：

<!DOCTYPE html> 
<head> 
<title>Example</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/> 
<style> 

body { 
    font-family: Helvetica; 
    margin:0; 
} 

#map{ 
    position:absolute; 
    top:0; 
    bottom:0; 
    width:100%;} 

</style> 
</head> 

<body> 
<div id="map"></div> 
<script> 

var sites = [ 
     {'loc':[42.2793869135936,9.53257201027757],'title':'TORRA A I CASELLI'}, 
     {'loc':[42.2713622720985,9.50678498185463],'title':'TOUR GIANDINELLI'}, 
     {'loc':[42.641518105666,9.00587322013212],'title':'TOUR DE LOSARI'},]; 

var map = new L.Map('map'); 
map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); 
map.setView([42.5,9.2210706018535],9); 

var marks = new L.LayerGroup(); 
    for(i in sites) { 
     var title = sites[i].title, 
      loc = sites[i].loc, 
      markersites = new L.Marker(new L.latLng(loc), {title: title}); 
     markersites.bindPopup('<strong>'+title+'</strong><br>'); 
     marks.addLayer(markersites); 
    } 
marks.addTo(map); 

// for now it is all good, the next part is where I fail 

marks.on('click',function(){ 
    console.log("Yeah!"); 
    new L.circle(this.getLatLng(), 10000, {color:'red', fillOpacity:0.3}).addTo(map)}); 

</script> 
</body> 
</html>

ご協力いただきありがとうございます。

乾杯、ギヨーム。

出典

2016-12-12 GuiOm Clair

は、私の答えはあなたのために動作しない場合は私が知ってください。私はあなたの質問をupvoted非常に簡単に開いて、実験のリーフレットの例を提供したので、！ –

あなたはそれを言ってうれしいです！多分私の質問が大きすぎると思うかもしれないと思っていることを考えれば、私は投稿に躊躇していました。 :) –

：このような必要に応じて

はまた、あなたがポップアップを作成している時点で、あなたは追加の情報をバインドすることができます。

まず、すべてのマーカーに「クリック」リスナーを付ける必要があります。これにより、ポップアップが開いたときにサークルを描画することができます。また、このサークルへの参照をjavascriptポップアップオブジェクトに保持する必要があります。

// keep a reference on the current active circle 
var activeCircle = false; 

markersites.on('click', function(e) { 
    // marker clicked is e.target 

    // remove active circle if any 
    if(activeCircle) { 
    map.removeLayer(activeCircle); 
    } 
    // draw a 10km circle with the same center as the marker 
    activeCircle = L.circle(e.target.getLatLng(), { radius: 10000 , color: "#ff0000" }).addTo(map); 
     });

例はここにある：http://plnkr.co/edit/OufPbq07ywEZh1N5VA8Y?p=preview

出典

2016-12-13 06:41:30 YaFred

本当にありがとう、ありがとう！しかし、私は別のマーカーをクリックしない限り（たとえ私がポップアップを閉じても）サークルを保持したいと思います。これは、control.layerパネルでこれらの円でレイヤーを管理する予定があるためです。私は現在これを行うことを検討していますが、いくつかの追加情報があれば大歓迎です。 –

この場合、最後に作成したサークルの参照を保持するだけです。更新された答えと例を参照してください。それが助けられたら、答えを受け入れることは大歓迎です。 – YaFred

はい、ありがとうございます。私は残っている最後の質問が1つあります。これらのサークルを別々のレイヤーとして管理したいのですが、マーカーを定義する関数の外にそれらを作成する必要があるようです。あなたはそれをする方法を知っていますか？あなたがすでに私に与えてくれた答えにもう一度感謝します。 –

マーカーにポップアップをバインドしているため、クリックイベントに応じてリーフレットのポップアップが開きます。しかし、あなたも同じように、独自のコールバックを追加することで、それらのイベントにフックすることができます

map.on('popupopen', function (e) { 
currentPopup = e.popup; // keep track of current popup 
// Do stuff with the popup or inspect it's marker here... 
});

非常に柔軟であるリーフレットAPIを使用してこの問題を解決する他の方法は、おそらくあります。このアプローチは過去に私のために働いてきました。あなたは画層グループを使用しているという事実は、あなたの問題の一部ではない

var content = '<b>'+ something + '</b>: '+ etc; 
var popup = L.popup(); 
popup.setContent(content); 
popup.markerId = 'some id'; 
layer.bindPopup(popup);

出典

2016-12-12 21:24:03

はいそれは機能します！ありがとう！しかし、以下のFranceImageの答えは、popupcloseイベントから独立してこれらのサークルを削除する方法を探していても、レイヤーグループに直接適用されるため、私の必要性に適しています。 –

喜んで助けてください！私の答えをupvoteに自由に感じてください、それはSOに「感謝」と言う最良の方法です。 –

答えて

関連する問題