リーフレット - マーカー上にマウスを乗せたときの線を表示

-1

私は質問があります。マーカー間に線を引いて、右のマーカー上にマウスカーソルを置いたときにのみマーカーを表示する可能性はありますか？リーフレット - マーカー上にマウスを乗せたときの線を表示

2017-07-17 szymix12

これはmouseover and mouseout eventsで行うことができます。ここにはいくつかのマーカーを使った簡単な例があります。マーカーの一つで、私はマウスがマーカーの上に置いたときにポリラインを追加/削除するためにイベントリスナーを追加しました：はい、それは

//for the demo 
 
var defaultCoords = [28.561508, 77.227]; 
 

 
//set up our map 
 
var map = L.map('map').setView(defaultCoords, 15); 
 
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(map); 
 

 

 
//add some markers 
 
var pt1 = [28.561508, 77.220098]; 
 
var pt2 = [28.565492, 77.23383]; 
 
var pt3 = [28.561635, 77.221411]; 
 

 
L.marker(pt1).addTo(map); 
 
L.marker(pt2).addTo(map); 
 

 

 
//on this marker, add the mouse hover events to show/hide a single polyline 
 
var marker3 = L.marker(pt3).addTo(map); 
 
marker3.on({ 
 
    mouseover: showLine, 
 
    mouseout: hideLine 
 
}) 
 

 
var line; 
 

 
function showLine() { 
 
    if (!line) { 
 
    line = L.polyline([pt2, pt3]); 
 
    } 
 
    line.addTo(map) 
 
} 
 

 
function hideLine() { 
 
    map.removeLayer(line) 
 
}

<title>Leaflet example</title> 
 
<meta charset="utf-8" /> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> 
 
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin="" /> 
 
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script> 
 

 
<style> 
 
    #map { 
 
    width: 600px; 
 
    height: 400px; 
 
    } 
 
</style> 
 

 
</head> 
 

 
<body> 
 

 
    <div id='map'></div> 
 

 
</body>

出典

2017-07-17 12:47:20

です。あなたのニーズに応じて、行をアニメートすることもできます：[例]（https://cccruzr.github.io/colmigrationmapbox/）。 – Camilo

リーフレット - マーカー上にマウスを乗せたときの線を表示

答えて

関連する問題