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

Question

如何在 leaflet.js 中的一对标记之间并排放置两条或多条折线？

\n\n

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

\n\n

// HTML\n<div id="map" style="height:500px;"></div>\n\n//example user location\nvar userLocation = new L.LatLng(35.974, -83.496);\n\nvar map = L.map(\'map\', \n      {center: userLocation,\n        zoom: 1,\n          worldCopyJump: true,\n      });\nL.tileLayer(\'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png\', {\n    maxZoom: 18,\n    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 \xc2\xa9 <a href="http://cloudmade.com">CloudMade</a>\'\n}).addTo(map);\n\n\nvar marker = new L.circleMarker(userLocation, {radius:10, fillColor:\'red\'});\nmap.addLayer(marker);\n\n//random locations around the world\nvar items = [{\n    //china\n    lat: "65.337",\n    lon: "158.027"\n}, {\n    //colombia\n    lat: "2.389",\n    lon: "-72.598"\n}];\n\ndrawData();\n\n//draw all the data on the map\nfunction drawData() {\n    var item, o;\n    //draw markers for all items\n    for (item in items) {\n        o = items[item];\n        var loc = new L.LatLng(o.lat, o.lon);\n        createMultiplePolyLine(loc, userLocation);\n    }\n}\n\n//draw polyline\nfunction createMultiplePolyLine(loc1, loc2) {\n\n    var latlongs = [loc1, loc2];\n    // two polylines but are overlapping, how to show them side-by-side?????\n    var polyline0 = new L.Polyline(latlongs, {\n        color: \'green\',\n        opacity: 1,\n        weight: 1,\n        clickable: false\n    }).addTo(map);\n\n    var polyline1 = new L.Polyline(latlongs, {\n        color: \'pink\',\n        opacity: 1,\n        weight: 1,\n        clickable: false\n    }).addTo(map);\n\n    //distance\n    var s = \'About \' + (loc1.distanceTo(loc2) / 1000).toFixed(0) + \'km away from you.</p>\';\n\n    var marker = L.circleMarker(loc1, {radius:20, fillColor:\'red\'}).addTo(map);\n    if (marker) {\n        marker.bindPopup(s);\n    }\n\n}\n

\n

Answer 1

经过大量谷歌搜索后终于找到了答案:)

\n\n

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

\n\n

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

\n\n

//example of parallel lines\nvar loc0 = [0,0];\nvar map = L.map(\'map\', \n      {center: loc0,\n        zoom: 8,\n          worldCopyJump: true,\n      });\nL.tileLayer(\'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png\', {\n    maxZoom: 18,\n    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 \xc2\xa9 <a href="http://cloudmade.com">CloudMade</a>\'\n}).addTo(map);\n\nvar loc0 = [0,0];\nvar radius = 10;\nvar radiusToLatScale = 0.000005;\nvar marker0 = new L.circleMarker(loc0, {radius:radius, fillColor:\'red\'}).bindPopup(\'0\');\nmap.addLayer(marker0);\n\nvar loc1 = [0,1];\nvar marker1 = new L.circleMarker(loc1, {radius:radius, fillColor:\'blue\'}).bindPopup(\'1\');\nmap.addLayer(marker1);\n\nvar latlongs0 = [loc0, loc1];\n// middle line\nvar polyline0 = new L.Polyline(latlongs0, {\n    color: \'green\',\n    opacity: 1,\n    weight: 1,\n    clickable: false\n}).addTo(map);\n\n// top line\nvar polyline0 = new L.Polyline(latlongs0, {\n    color: \'red\',\n    opacity: 1,\n    weight: 1,\n    clickable: false,\n    offset: radius\n}).addTo(map);\n\n// bottom line\nvar polyline0 = new L.Polyline(latlongs0, {\n    color: \'pink\',\n    opacity: 1,\n    weight: 1,\n    clickable: false,\n    offset: -radius\n}).addTo(map);\n

\n