Javascript 如何根据CSV中的坐标在传单中绘制圆标记？_Javascript_Html_Csv_Leaflet

Javascript 如何根据CSV中的坐标在传单中绘制圆标记？

javascript html csv leaflet

Javascript 如何根据CSV中的坐标在传单中绘制圆标记？,javascript,html,csv,leaflet,Javascript,Html,Csv,Leaflet,我对html和传单相当陌生。我正在使用HTML制作传单地图，并有一个可以显示许多圆圈标记的工作代码。然而，我有数百个圆圈需要绘制在我的传单地图上。我将把所有数据放入CSV中，我想知道如何引用CSV，以便根据CSV文件中引用的x、y位置绘制所需的所有圆。下面是我到目前为止的工作脚本（我必须为每个圆单独键入每个位置）。CSV文件包含每个圆标记的位置（第4列中的x位置和第5列中的y位置） var map=L.map（'map'{ crs:L.crs.Simple，最大缩放：7， }); var界

我对html和传单相当陌生。我正在使用HTML制作传单地图，并有一个可以显示许多圆圈标记的工作代码。然而，我有数百个圆圈需要绘制在我的传单地图上。我将把所有数据放入CSV中，我想知道如何引用CSV，以便根据CSV文件中引用的x、y位置绘制所需的所有圆。下面是我到目前为止的工作脚本（我必须为每个圆单独键入每个位置）。CSV文件包含每个圆标记的位置（第4列中的x位置和第5列中的y位置）


var map=L.map（'map'{
crs:L.crs.Simple，
最大缩放：7，
});
var界限=[[0,0]，[3002/3.62761/3.6]；
var image=L.imageOverlay（'/Users/rosaliabrien/Desktop/fields/pdfs/ERSPRIME_img.pdf'，bounds）。addTo（map）；
映射边界（bounds）；
移动鼠标的功能（e）{
x=（e.latlng.lng）*3.6；
y=（e.latlng.lat）*3.6；
y=数学圆（y）；
x=数学圆（x）；
r=（e.latlng.lng）*3.6*-0.000018816770169191928+53.09001347；
d=（e.latlng.lat）*3.6*0.000016673923337433226-27.7399435；
trackxy='x，y:'+x+'，'+y+'；
trackRD='RA，DEC:'+r+'，'+d+'；
document.getElementById（“跟踪器”）.innerHTML=trackxy；
document.getElementById（“tracker2”）.innerHTML=trackRD；
}
map.on（'mousemove'，onMouseMove）；
变量圆=L圆（[102/3.61362.062438192257/3.6]{
颜色：“红色”，
填充颜色：“#f03”，
不透明度：0，
不透明度：10，
半径：13
}).addTo（地图）；
圆圈.bindPopup（“gid#47760:+”）

请提供一些附加信息，包括代码，以便我们能够更好地帮助您解决问题！希望这能有所帮助。欢迎来到SO！虽然你的解释听起来有点让我困惑，但我想你会感兴趣的

<body> <div id="map"></div>
<script type="text/javascript">
var map = L.map('map', {
crs: L.CRS.Simple,
    maxZoom: 7,
});
var bounds = [[0,0],[3002/3.6, 2761/3.6]];
var image = L.imageOverlay('/Users/rosaliaobrien/Desktop/fields/pdfs/ERSPRIME_img.pdf', bounds).addTo(map);
map.fitBounds(bounds);

function onMouseMove(e) {
                                    x=(e.latlng.lng)*3.6;
                                    y=(e.latlng.lat)*3.6;
                                    y=Math.round(y);
                                    x=Math.round(x);
                                    r=(e.latlng.lng)*3.6*-0.000018816770169191928+53.09001347;
                                    d=(e.latlng.lat)*3.6*0.000016673923337433226-27.7399435; 


trackxy='<big> x, y: '+x+', '+y+'</big>';
trackRD='<big> RA, DEC: '+r+', '+d+'</big>';

                                    document.getElementById("tracker").innerHTML=trackxy;
                                    document.getElementById("tracker2").innerHTML=trackRD;

                                }
map.on('mousemove', onMouseMove);
var circle = L.circle([102/3.6, 1362.062438192257/3.6], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0,
opacity: 10,
radius: 13
}).addTo(map);
circle.bindPopup("gid#47760: " + '<a href="/Users/rosaliaobrien/Desktop/Bio_pages/HTML_files/South/47760.html" target="_blank"> BIO PAGE</a>')
</script>
</body>