两条折线在一对标记之间并排放置（使用leaflet）

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);
    }

}

- amulllb

---

“side by side”是什么意思？您正在创建具有完全相同坐标的两条折线。您有一个示例，它应该是什么样子的？ - Hinrich

我是指两条平行的线。显然，我需要改变第二条线的经纬度，使其与第一条线平行。我没有例子，但这是基本几何学。 - amulllb

我似乎无法获取圆形标记的周长的经纬度？如果可以的话，我就可以将第二行移动到圆的周长上。 - amulllb

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);

- amulllb