傳單 - 在標記上懸停時顯示線條

-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

傳單 - 在標記上懸停時顯示線條

回答

相關問題