两条折线并排在一对标记之间传单

Question

我怎样才能有两条或多条折线并排之间的一对标记leaflet.js？

下面是代码，我没有看到这种情况发生：http://jsfiddle.net/abarik/q9bxL1z6/1/

// HTML 
<div id="map" style="height:500px;"></div> 

//example user location 
var userLocation = new L.LatLng(35.974, -83.496); 

var map = L.map('map', 
     {center: userLocation, 
     zoom: 1, 
      worldCopyJump: true, 
     }); 
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', { 
    maxZoom: 18, 
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>' 
}).addTo(map); 


var marker = new L.circleMarker(userLocation, {radius:10, fillColor:'red'}); 
map.addLayer(marker); 

//random locations around the world 
var items = [{ 
    //china 
    lat: "65.337", 
    lon: "158.027" 
}, { 
    //colombia 
    lat: "2.389", 
    lon: "-72.598" 
}]; 

drawData(); 

//draw all the data on the map 
function drawData() { 
    var item, o; 
    //draw markers for all items 
    for (item in items) { 
     o = items[item]; 
     var loc = new L.LatLng(o.lat, o.lon); 
     createMultiplePolyLine(loc, userLocation); 
    } 
} 

//draw polyline 
function createMultiplePolyLine(loc1, loc2) { 

    var latlongs = [loc1, loc2]; 
    // two polylines but are overlapping, how to show them side-by-side????? 
    var polyline0 = new L.Polyline(latlongs, { 
     color: 'green', 
     opacity: 1, 
     weight: 1, 
     clickable: false 
    }).addTo(map); 

    var polyline1 = new L.Polyline(latlongs, { 
     color: 'pink', 
     opacity: 1, 
     weight: 1, 
     clickable: false 
    }).addTo(map); 

    //distance 
    var s = 'About ' + (loc1.distanceTo(loc2)/1000).toFixed(0) + 'km away from you.</p>'; 

    var marker = L.circleMarker(loc1, {radius:20, fillColor:'red'}).addTo(map); 
    if (marker) { 
     marker.bindPopup(s); 
    } 

} 

Answer 1

找到答案终于，很多谷歌上搜索后:)

http://jsfiddle.net/abarik/q9bxL1z6/4/

使用插件：https://github.com/bbecquet/Leaflet.PolylineOffset

//example of parallel lines 
var loc0 = [0,0]; 
var map = L.map('map', 
     {center: loc0, 
     zoom: 8, 
      worldCopyJump: true, 
     }); 
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', { 
    maxZoom: 18, 
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>' 
}).addTo(map); 

var loc0 = [0,0]; 
var radius = 10; 
var radiusToLatScale = 0.000005; 
var marker0 = new L.circleMarker(loc0, {radius:radius, fillColor:'red'}).bindPopup('0'); 
map.addLayer(marker0); 

var loc1 = [0,1]; 
var marker1 = new L.circleMarker(loc1, {radius:radius, fillColor:'blue'}).bindPopup('1'); 
map.addLayer(marker1); 

var latlongs0 = [loc0, loc1]; 
// middle line 
var polyline0 = new L.Polyline(latlongs0, { 
    color: 'green', 
    opacity: 1, 
    weight: 1, 
    clickable: false 
}).addTo(map); 

// top line 
var polyline0 = new L.Polyline(latlongs0, { 
    color: 'red', 
    opacity: 1, 
    weight: 1, 
    clickable: false, 
    offset: radius 
}).addTo(map); 

// bottom line 
var polyline0 = new L.Polyline(latlongs0, { 
    color: 'pink', 
    opacity: 1, 
    weight: 1, 
    clickable: false, 
    offset: -radius 
}).addTo(map);