1
我怎樣纔能有兩條或多條折線並排之間的一對標記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 © <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);
}
}
你是什麼意思「旁邊方「?您正在創建具有完全相同座標的兩條多段線。你有一個例子,它應該是什麼樣子? – Hinrich
我的意思是兩條線相互平行。我顯然需要改變第二次的latlong,使其平行於第一線。我沒有一個例子,但它的基本幾何結構 – abarik
我似乎無法獲得圓標記的圓周的latlong?如果可以的話,我可以將第二條線移動到圓周上 – abarik