我是一般编程人员和使用p5.js和Leaflet的workig的新手。 我正在尝试使用Leaflet在地图上绘制多个圆圈。 我以2D数组显示了世界上所有国家首都的坐标。 我遍历数组以为每行坐标创建一个圆形标记。到目前为止，它仍然有效，但问题是，我实际上只得到一个只有一对坐标的圆形对象，称为“圆形”。 我的问题：如何为每个循环创建一个名称不同的新对象，因此每个圆圈实际上都是一个单独的对象，可以单独处理事件？
这是到目前为止的代码：
var coords = [
[+41.3317, +19.8172],
[+42.5075, +1.5218],
[+53.9678, +27.5766],
[+50.8371, +4.3676],
[+43.8608, +18.4214],
[+42.7105, +23.3238],
[+55.6763, +12.5681],
[+52.5235, +13.4115],
[+59.4389, +24.7545],
[+60.1699, +24.9384],
[+48.8567, +2.3510],
[+37.9792, +23.7166],
[+51.5002, -0.1262],
[+53.3441, -6.2675],
[+64.1353, -21.8952],
[+41.8955, +12.4823],
[+42.6740, +21.1788],
[+45.8150, +15.9785],
[+56.9465, +24.1049],
[+47.1411, +9.5215],
[+54.6896, +25.2799],
[+49.6100, +6.1296],
[+35.9042, +14.5189],
[+47.0167, +28.8497],
[+43.7325, +7.4189],
[+42.4602, +19.2595],
[+52.3738, +4.8910],
[+42.0024, +21.4361],
[+59.9138, +10.7387],
[+48.2092, +16.3728],
[+52.2297, +21.0122],
[+38.7072, -9.1355],
[+44.4479, +26.0979],
[+55.7558, +37.6176],
[+43.9424, +12.4578],
[+59.3328, +18.0645],
[+46.9480, +7.4481],
[+44.8048, +20.4781],
[+48.2116, +17.1547],
[+46.0514, +14.5060],
[+40.4167, -3.7033],
[+50.0878, +14.4205],
[+50.4422, +30.5367],
[+47.4984, +19.0408],
[+62.0177, -6.7719],
[+36.1377, -5.3453],
[+49.4660, -2.5522],
[+54.1670, -4.4821],
[+49.1919, -2.1071],
[+78.2186, +15.6488],
[+34.5155, +69.1952],
[+40.1596, +44.5090],
[+40.3834, +49.8932],
[+26.1921, +50.5354],
[+23.7106, +90.3978],
[+27.4405, +89.6730],
[+4.9431, +114.9425],
[+39.9056, +116.3958],
[+41.7010, +44.7930],
[+28.6353, +77.2250],
[-6.1862, +106.8063],
[+33.3157, +44.3922],
[+35.7061, +51.4358],
[+31.7857, +35.2007],
[+35.6785, +139.6823],
[+15.3556, +44.2081],
[+31.9394, +35.9349],
[+11.5434, +104.8984],
[+51.1796, +71.4475],
[+25.2948, +51.5082],
[+42.8679, +74.5984],
[+29.3721, +47.9824],
[+17.9689, +102.6137],
[+33.8872, +35.5134],
[+3.1502, +101.7077],
[+4.1742, +73.5109],
[+47.9138, +106.9220],
[+19.7378, +96.2083],
[+27.7058, +85.3157],
[+39.0187, +125.7468],
[+23.6086, +58.5922],
[+33.6751, +73.0946],
[+14.5790, +120.9726],
[+24.6748, +46.6977],
[+1.2894, +103.8500],
[+6.9155, +79.8572],
[+33.5158, +36.2939],
[+37.5139, +126.9828],
[+38.5737, +68.7738],
[+13.7573, +100.5020],
[-8.5662, +125.5880],
[+39.9439, +32.8560],
[+37.9509, +58.3794],
[+41.3193, +69.2481],
[+24.4764, +54.3705],
[+21.0341, +105.8372],
[+35.1676, +33.3736],
[+25.0338, +121.5645],
[+17.1175, -61.8456],
[-34.6118, -58.4173],
[+25.0661, -77.3390],
[+13.0935, -59.6105],
[+17.2534, -88.7713],
[-19.0421, -65.2559],
[-15.7801, -47.9292],
[-33.4691, -70.6420],
[+9.9402, -84.1002],
[+15.2976, -61.3900],
[+18.4790, -69.8908],
[-0.2295, -78.5243],
[+13.7034, -89.2073],
[+12.0540, -61.7486],
[+14.6248, -90.5328],
[+6.8046, -58.1548],
[+18.5392, -72.3288],
[+14.0821, -87.2063],
[+17.9927, -76.7920],
[+45.4235, -75.6979],
[+4.6473, -74.0962],
[+23.1333, -82.3667],
[+19.4271, -99.1276],
[+12.1475, -86.2734],
[+8.9943, -79.5188],
[-25.3005, -57.6362],
[-12.0931, -77.0465],
[+17.2968, -62.7138],
[+13.9972, -61.0018],
[+13.2035, -61.2653],
[+5.8232, -55.1679],
[+10.6596, -61.4789],
[-34.8941, -56.0675],
[+10.4961, -66.8983],
[+38.8921, -77.0241],
[+18.3405, -64.9326],
[+18.2249, -63.0669],
[+12.5246, -70.0265],
[+32.2930, -64.7820],
[+18.4328, -64.6235],
[+19.3022, -81.3857],
[-51.7010, -57.8492],
[+4.9346, -52.3303],
[+64.1836, -51.7214],
[+15.9985, -61.7220],
[+14.5997, -61.0760],
[+16.6802, -62.2014],
[+12.1034, -68.9335],
[+18.4500, -66.0667],
[+46.7878, -56.1968],
[+21.4608, -71.1363],
[+30.0571, +31.2272],
[+36.7755, +3.0597],
[-8.8159, +13.2306],
[+3.7523, +8.7741],
[+9.0084, +38.7575],
[+6.4779, +2.6323],
[-24.6570, +25.9089],
[+12.3569, -1.5352],
[-3.3818, +29.3622],
[+6.8067, -5.2728],
[+11.5806, +43.1425],
[+15.3315, +38.9183],
[+0.3858, +9.4496],
[+13.4399, -16.6775],
[+5.5401, -0.2074],
[+9.5370, -13.6785],
[+11.8598, -15.5875],
[+3.8612, +11.5217],
[+14.9195, -23.5153],
[-1.2762, +36.7965],
[-11.7004, +43.2412],
[-4.2767, +15.2662],
[-4.3369, +15.3271],
[-29.2976, +27.4854],
[+6.3106, -10.8047],
[+32.8830, +13.1897],
[-18.9201, +47.5237],
[-13.9899, +33.7703],
[+12.6530, -7.9864],
[+33.9905, -6.8704],
[+18.0669, -15.9900],
[-20.1654, +57.4896],
[-25.9686, +32.5804],
[-22.5749, +17.0805],
[+13.5164, +2.1157],
[+9.0580, +7.4891],
[-1.9441, +30.0619],
[-15.4145, +28.2809],
[+0.3360, +6.7311],
[+14.6953, -17.4439],
[-4.6167, +55.4500],
[+8.4697, -13.2659],
[-17.8227, +31.0496],
[+2.0411, +45.3426],
[+15.5501, +32.5322],
[+4.8496, +31.6046],
[-26.3186, +31.1410],
[-25.7463, +28.1876],
[-6.1670, +35.7497],
[+6.1228, +1.2255],
[+12.1121, +15.0355],
[+36.8117, +10.1761],
[+0.3133, +32.5714],
[+4.3621, +18.5873],
[-12.7806, +45.2278],
[-20.8732, +55.4603],
[-15.9244, -5.7181],
[+27.1536, -13.2033],
[-35.2820, +149.1286],
[-18.1416, +178.4419],
[+1.3282, +172.9784],
[+7.1167, +171.3667],
[+6.9177, +158.1854],
[-0.5434, +166.9196],
[-41.2865, +174.7762],
[+7.5007, +134.6241],
[-9.4656, +147.1969],
[-9.4333, +159.9500],
[-13.8314, -171.7518],
[-21.1360, -175.2164],
[-8.5210, +179.1983],
[-17.7404, +168.3210],
[-14.2793, -170.7009],
[-21.2039, -159.7658],
[-17.5350, -149.5696],
[+13.4667, +144.7470],
[-12.1869, +96.8283],
[-22.2758, +166.4581],
[-19.0565, -169.9237],
[+15.2069, +145.7197],
[-29.0545, +167.9666],
[-25.0662, -130.1027],
[-13.2784, -176.1430],
[-10.4286, +105.6807],
[+32.3754, -86.2996],
[+58.3637, -134.5721],
[+33.4483, -112.0738],
[+34.7244, -92.2789],
[+38.5737, -121.4871],
[+39.7551, -104.9881],
[+41.7665, -72.6732],
[+39.1615, -75.5136],
[+30.4382, -84.2806],
[+33.7545, -84.3897],
[+21.2920, -157.8219],
[+43.6021, -116.2125],
[+39.8018, -89.6533],
[+39.7670, -86.1563],
[+41.5888, -93.6203],
[+39.0474, -95.6815],
[+38.1894, -84.8715],
[+30.4493, -91.1882],
[+44.3294, -69.7323],
[+38.9693, -76.5197],
[+42.3589, -71.0568],
[+42.7336, -84.5466],
[+44.9446, -93.1027],
[+32.3122, -90.1780],
[+38.5698, -92.1941],
[+46.5911, -112.0205],
[+40.8136, -96.7026],
[+39.1501, -119.7519],
[+43.2314, -71.5597],
[+40.2202, -74.7642],
[+35.6816, -105.9381],
[+42.6517, -73.7551],
[+35.7797, -78.6434],
[+46.8084, -100.7694],
[+39.9622, -83.0007],
[+35.4931, -97.4591],
[+44.9370, -123.0272],
[+40.2740, -76.8849],
[+41.8270, -71.4087],
[+34.0007, -81.0353],
[+44.3776, -100.3177],
[+36.1589, -86.7821],
[+30.2687, -97.7452],
[+40.7716, -111.8882],
[+44.2627, -72.5716],
[+37.5408, -77.4339],
[+47.0449, -122.9016],
[+38.3533, -81.6354],
[+43.0632, -89.4007],
[+41.1389, -104.8165]
];
var newCoords = [];
var circleIndex = [];
var circle;
function setup() {
//Initializig the map
mapId = createDiv();
mapId.id("mapid");
mapId.size(windowWidth, windowHeight);
mapId.position(0, 0)
mymap = L.map('mapid').setView([0, 0], 2.5);
//Loading tiles from mapbox
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
accessToken: 'pk.eyJ1Ijoib3NrYXItcXVpcmluLWthY2tlYmFydCIsImEiOiJjazV4b2EyM2UyMWdtM2VtbG0wdzFvM2p2In0.SrMgYWTBUYDq3f703br1aQ'
}).addTo(mymap);
//creating the circles on the map
for (i = 0; i < coords.length; i++) {
circleIndex[i] = []
for (j = 0; j < coords[i].length; j++) {
circleIndex[i].push(coords[i][j]);
newCoords.push(coords[i][j]);
}
circle = L.circle(newCoords, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.3,
radius: 50000
}).addTo(mymap);
newCoords = []
//adding callback function to a click event for the circle. This will only work for the circle with the Index 1 of the array.
}
circle.on('click', function(click) {
alert(this.latlng);
});
}
任何建议，如何掌握？我可以以某种方式更改构造函数以为每个行索引或其他内容添加不同的名称索引吗？
抱歉，代码太杂乱了^^我也愿意接受编辑建议。
干杯！
答案 0 :(得分：0)
如果要保留对每个圆的引用，可以将它们添加到数组或字典中。我将使用数组，因为您没有像字符串名称那样区分每个圆的任何内容。
这是我如何编辑代码。
请记住也将循环内的变量声明为var i或let i。
var coords = [
[+41.3317, +19.8172],
[+42.5075, +1.5218],
[+53.9678, +27.5766],
[+50.8371, +4.3676],
[+43.8608, +18.4214],
[+42.7105, +23.3238],
[+55.6763, +12.5681],
[+52.5235, +13.4115],
[+59.4389, +24.7545],
[+60.1699, +24.9384],
[+48.8567, +2.3510],
[+37.9792, +23.7166],
[+51.5002, -0.1262],
[+53.3441, -6.2675],
[+64.1353, -21.8952],
[+41.8955, +12.4823],
[+42.6740, +21.1788],
[+45.8150, +15.9785],
[+56.9465, +24.1049],
[+47.1411, +9.5215],
[+54.6896, +25.2799],
[+49.6100, +6.1296],
[+35.9042, +14.5189],
[+47.0167, +28.8497],
[+43.7325, +7.4189],
[+42.4602, +19.2595],
[+52.3738, +4.8910],
[+42.0024, +21.4361],
[+59.9138, +10.7387],
[+48.2092, +16.3728],
[+52.2297, +21.0122],
[+38.7072, -9.1355],
[+44.4479, +26.0979],
[+55.7558, +37.6176],
[+43.9424, +12.4578],
[+59.3328, +18.0645],
[+46.9480, +7.4481],
[+44.8048, +20.4781],
[+48.2116, +17.1547],
[+46.0514, +14.5060],
[+40.4167, -3.7033],
[+50.0878, +14.4205],
[+50.4422, +30.5367],
[+47.4984, +19.0408],
[+62.0177, -6.7719],
[+36.1377, -5.3453],
[+49.4660, -2.5522],
[+54.1670, -4.4821],
[+49.1919, -2.1071],
[+78.2186, +15.6488],
[+34.5155, +69.1952],
[+40.1596, +44.5090],
[+40.3834, +49.8932],
[+26.1921, +50.5354],
[+23.7106, +90.3978],
[+27.4405, +89.6730],
[+4.9431, +114.9425],
[+39.9056, +116.3958],
[+41.7010, +44.7930],
[+28.6353, +77.2250],
[-6.1862, +106.8063],
[+33.3157, +44.3922],
[+35.7061, +51.4358],
[+31.7857, +35.2007],
[+35.6785, +139.6823],
[+15.3556, +44.2081],
[+31.9394, +35.9349],
[+11.5434, +104.8984],
[+51.1796, +71.4475],
[+25.2948, +51.5082],
[+42.8679, +74.5984],
[+29.3721, +47.9824],
[+17.9689, +102.6137],
[+33.8872, +35.5134],
[+3.1502, +101.7077],
[+4.1742, +73.5109],
[+47.9138, +106.9220],
[+19.7378, +96.2083],
[+27.7058, +85.3157],
[+39.0187, +125.7468],
[+23.6086, +58.5922],
[+33.6751, +73.0946],
[+14.5790, +120.9726],
[+24.6748, +46.6977],
[+1.2894, +103.8500],
[+6.9155, +79.8572],
[+33.5158, +36.2939],
[+37.5139, +126.9828],
[+38.5737, +68.7738],
[+13.7573, +100.5020],
[-8.5662, +125.5880],
[+39.9439, +32.8560],
[+37.9509, +58.3794],
[+41.3193, +69.2481],
[+24.4764, +54.3705],
[+21.0341, +105.8372],
[+35.1676, +33.3736],
[+25.0338, +121.5645],
[+17.1175, -61.8456],
[-34.6118, -58.4173],
[+25.0661, -77.3390],
[+13.0935, -59.6105],
[+17.2534, -88.7713],
[-19.0421, -65.2559],
[-15.7801, -47.9292],
[-33.4691, -70.6420],
[+9.9402, -84.1002],
[+15.2976, -61.3900],
[+18.4790, -69.8908],
[-0.2295, -78.5243],
[+13.7034, -89.2073],
[+12.0540, -61.7486],
[+14.6248, -90.5328],
[+6.8046, -58.1548],
[+18.5392, -72.3288],
[+14.0821, -87.2063],
[+17.9927, -76.7920],
[+45.4235, -75.6979],
[+4.6473, -74.0962],
[+23.1333, -82.3667],
[+19.4271, -99.1276],
[+12.1475, -86.2734],
[+8.9943, -79.5188],
[-25.3005, -57.6362],
[-12.0931, -77.0465],
[+17.2968, -62.7138],
[+13.9972, -61.0018],
[+13.2035, -61.2653],
[+5.8232, -55.1679],
[+10.6596, -61.4789],
[-34.8941, -56.0675],
[+10.4961, -66.8983],
[+38.8921, -77.0241],
[+18.3405, -64.9326],
[+18.2249, -63.0669],
[+12.5246, -70.0265],
[+32.2930, -64.7820],
[+18.4328, -64.6235],
[+19.3022, -81.3857],
[-51.7010, -57.8492],
[+4.9346, -52.3303],
[+64.1836, -51.7214],
[+15.9985, -61.7220],
[+14.5997, -61.0760],
[+16.6802, -62.2014],
[+12.1034, -68.9335],
[+18.4500, -66.0667],
[+46.7878, -56.1968],
[+21.4608, -71.1363],
[+30.0571, +31.2272],
[+36.7755, +3.0597],
[-8.8159, +13.2306],
[+3.7523, +8.7741],
[+9.0084, +38.7575],
[+6.4779, +2.6323],
[-24.6570, +25.9089],
[+12.3569, -1.5352],
[-3.3818, +29.3622],
[+6.8067, -5.2728],
[+11.5806, +43.1425],
[+15.3315, +38.9183],
[+0.3858, +9.4496],
[+13.4399, -16.6775],
[+5.5401, -0.2074],
[+9.5370, -13.6785],
[+11.8598, -15.5875],
[+3.8612, +11.5217],
[+14.9195, -23.5153],
[-1.2762, +36.7965],
[-11.7004, +43.2412],
[-4.2767, +15.2662],
[-4.3369, +15.3271],
[-29.2976, +27.4854],
[+6.3106, -10.8047],
[+32.8830, +13.1897],
[-18.9201, +47.5237],
[-13.9899, +33.7703],
[+12.6530, -7.9864],
[+33.9905, -6.8704],
[+18.0669, -15.9900],
[-20.1654, +57.4896],
[-25.9686, +32.5804],
[-22.5749, +17.0805],
[+13.5164, +2.1157],
[+9.0580, +7.4891],
[-1.9441, +30.0619],
[-15.4145, +28.2809],
[+0.3360, +6.7311],
[+14.6953, -17.4439],
[-4.6167, +55.4500],
[+8.4697, -13.2659],
[-17.8227, +31.0496],
[+2.0411, +45.3426],
[+15.5501, +32.5322],
[+4.8496, +31.6046],
[-26.3186, +31.1410],
[-25.7463, +28.1876],
[-6.1670, +35.7497],
[+6.1228, +1.2255],
[+12.1121, +15.0355],
[+36.8117, +10.1761],
[+0.3133, +32.5714],
[+4.3621, +18.5873],
[-12.7806, +45.2278],
[-20.8732, +55.4603],
[-15.9244, -5.7181],
[+27.1536, -13.2033],
[-35.2820, +149.1286],
[-18.1416, +178.4419],
[+1.3282, +172.9784],
[+7.1167, +171.3667],
[+6.9177, +158.1854],
[-0.5434, +166.9196],
[-41.2865, +174.7762],
[+7.5007, +134.6241],
[-9.4656, +147.1969],
[-9.4333, +159.9500],
[-13.8314, -171.7518],
[-21.1360, -175.2164],
[-8.5210, +179.1983],
[-17.7404, +168.3210],
[-14.2793, -170.7009],
[-21.2039, -159.7658],
[-17.5350, -149.5696],
[+13.4667, +144.7470],
[-12.1869, +96.8283],
[-22.2758, +166.4581],
[-19.0565, -169.9237],
[+15.2069, +145.7197],
[-29.0545, +167.9666],
[-25.0662, -130.1027],
[-13.2784, -176.1430],
[-10.4286, +105.6807],
[+32.3754, -86.2996],
[+58.3637, -134.5721],
[+33.4483, -112.0738],
[+34.7244, -92.2789],
[+38.5737, -121.4871],
[+39.7551, -104.9881],
[+41.7665, -72.6732],
[+39.1615, -75.5136],
[+30.4382, -84.2806],
[+33.7545, -84.3897],
[+21.2920, -157.8219],
[+43.6021, -116.2125],
[+39.8018, -89.6533],
[+39.7670, -86.1563],
[+41.5888, -93.6203],
[+39.0474, -95.6815],
[+38.1894, -84.8715],
[+30.4493, -91.1882],
[+44.3294, -69.7323],
[+38.9693, -76.5197],
[+42.3589, -71.0568],
[+42.7336, -84.5466],
[+44.9446, -93.1027],
[+32.3122, -90.1780],
[+38.5698, -92.1941],
[+46.5911, -112.0205],
[+40.8136, -96.7026],
[+39.1501, -119.7519],
[+43.2314, -71.5597],
[+40.2202, -74.7642],
[+35.6816, -105.9381],
[+42.6517, -73.7551],
[+35.7797, -78.6434],
[+46.8084, -100.7694],
[+39.9622, -83.0007],
[+35.4931, -97.4591],
[+44.9370, -123.0272],
[+40.2740, -76.8849],
[+41.8270, -71.4087],
[+34.0007, -81.0353],
[+44.3776, -100.3177],
[+36.1589, -86.7821],
[+30.2687, -97.7452],
[+40.7716, -111.8882],
[+44.2627, -72.5716],
[+37.5408, -77.4339],
[+47.0449, -122.9016],
[+38.3533, -81.6354],
[+43.0632, -89.4007],
[+41.1389, -104.8165]
];
//var newCoords = []; // this is only used inside the loop so it can be declared there
//var circleIndex = []; // this is not being used
//var circle; // this gets overridden on each iteration
var circles = []; // Use this array to store the created circles
function setup() {
//Initializig the map
mapId = createDiv();
mapId.id("mapid");
mapId.size(windowWidth, windowHeight);
mapId.position(0, 0)
mymap = L.map('mapid').setView([0, 0], 2.5);
//Loading tiles from mapbox
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
accessToken: 'pk.eyJ1Ijoib3NrYXItcXVpcmluLWthY2tlYmFydCIsImEiOiJjazV4b2EyM2UyMWdtM2VtbG0wdzFvM2p2In0.SrMgYWTBUYDq3f703br1aQ'
}).addTo(mymap);
//creating the circles on the map
// Tip: Instead of looking at the coords multidimensional array as a matrix, think of
// it as a list of coordinate pairs, which you can loop without using indexes
for (let newCoordPair of coords) {
var circle = L.circle(newCoordPair, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.3,
radius: 50000
}).addTo(mymap);
circles.push(circle);
// Add here the event to the circle if you want all the circles to have it
circle.on('click', function(click) {
alert(this.latlng);
});
}
}