반응형
.CSV 파일 특정 컬럼 데이터 카카오 맵 마커 표기
<html>
<head>
<meta charset="utf-8"/>
<title>Kakao map</title>
</head>
<body>
<div id="map" style="width:100%;height:1000px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey="></script>
<script>
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(37.5665, 126.9780),
level: 7
};
var map = new kakao.maps.Map(container, options);
function readCSV() {
var xmlhttp = new XMLHttpRequest();
var url = "data.csv";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
parseCSV(this.responseText);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function parseCSV(csv) {
var lines = csv.split("\n");
for (var i = 0; i < lines.length; i++) {
var data = lines[i].split(",");
var lat = parseFloat(data[23]);
var lng = parseFloat(data[24]);
var name = data[5];
var marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(lat, lng),
map: map
});
var infowindow = new kakao.maps.InfoWindow({
content: name
});
kakao.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
return function() {
if (infowindow.getMap()) {
infowindow.close();
} else {
infowindow.open(map, marker);
}
};
})(marker, infowindow));
}
}
readCSV();
</script>
</body>
</html>
- data.csv 컬럼의 23번째(위도), 24(경도) 5(시설명)의 데이터를 length(데이터 갯수)까지 출력하고 마커로 맵에 표기
- csv는 ,로 구분
반응형
'Coding > javascript' 카테고리의 다른 글
| [JS] .CSV 파일 특정 컬럼 데이터 구글 맵 마커 표기(fetch) (0) | 2024.05.03 |
|---|---|
| [JS] jquery $.ajax 간단한 사용 예제 (0) | 2023.12.15 |
댓글