[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
안녕하세요.
현재 자바스크립 초보라서 정말 도움을 받고 싶어 문의드립니다.
벌써 2틀째 골머리 중인데 도저히 방법을 모르겠습니다.ㅠㅠ
현재 카카오맵 마커 표시에는 위치정보 positions 가 4개가 예시로 되어있습닏.ㅏ
저는 고속도로 영업소 장소를 (99개) 지도에 마커로 표시하고 싶은데
이것저것 많이 시도해보았지만 지도에 마커가 표시가 되지 않습니다.ㅠㅠ
var positions = new Array();
setPointsFromJson();
// 고속도로 영업소 위치정보 받아오기
function setPointsFromJson() {
axios
.get('http://data.ex.co.kr/openapi/locationinfo/locationinfoUnit?key=~&type=json&numOfRows=500&pageNo=1')
.then(res =>{
//console.log(res)
for (let i = 0; i < res.data.list.length; i ++){
let title = res.data.list[i].unitName;
let x = res.data.list[i].xValue;
let y = res.data.list[i].yValue;
var temp =
{
content: `<div>${title}/div>`,
latlng: new kakao.maps.LatLng(x, y)
};
positions.push(temp)
}
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다
// var positions = [
// {
// content: '<div>카카오</div>',
// latlng: new kakao.maps.LatLng(33.450705, 126.570677)
// },
// {
// content: '<div>생태연못</div>',
// latlng: new kakao.maps.LatLng(33.450936, 126.569477)
// },
// {
// content: '<div>텃밭</div>',
// latlng: new kakao.maps.LatLng(33.450879, 126.569940)
// },
// {
// content: '<div>근린공원</div>',
// latlng: new kakao.maps.LatLng(33.451393, 126.570738)
// }
// ];
console.log(positions[0].content )
for (var i = 0; i < positions.length; i ++) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng // 마커의 위치
});
// 마커에 표시할 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: positions[i].content // 인포윈도우에 표시할 내용
});
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
}
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}
})};
정말 쉬운 방법이 잇을 것 같은데
거의 100개의 정보를 수작업으로 입력하지 않고 하는
방법을 도움 부탁드리겠습니다.ㅜㅜ