안녕하세요 코로나 마스크 맵을 만들기 위해 공공데이터포털에서 데이터를 받고 위치를 지도에 나타내려하는데 좌표값을 넣어도 위치가 이상하게 나옵니다 ㅠㅜ
Document<script>
const url =
"https://8oi9s0nnth.apigw.ntruss.com/corona19-masks/v1/storesByGeo/json?lat=37.553396&lng=126.972674&m=5000";
var mapContainer = document.getElementById("map"), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.659701, 126.773286), // 지도의 중심좌표
level: 3, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP, // 지도종류
};
// 지도를 생성한다
var map = new kakao.maps.Map(mapContainer, mapOption);
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 10 // 클러스터 할 최소 지도 레벨
});
//인포윈도우를 표시하는 클로저를 만드는 함수입니다.
function makeOverListener(map, marker, Infowindow) {
return function() {
Infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(Infowindow) {
return function() {
infowindow.close();
};
}
fetch(url)
.then((res) => res.json())
.then((myJson) => {
var markers = [];
const stores = myJson.stores;
for (var i = 0; i < stores.length; i++){
//지도에 마커 생성,표시
var marker = new kakao.maps.Marker({
Position: new kakao.maps.LatLng(
stores[i]["lat"],
stores[i]["lng"]
), //마커 좌표
});
//인포윈도우 생성
var infowindow = new kakao.maps.InfoWindow({
content : stores[i]["name"],
});
markers.push(marker);
kakao.maps.event.addListener(
marker,
"mouseover",
makeOverListener(map, marker, infowindow)
);
kakao.maps.event.addListener(
marker,
"mouseout",
makeOverListener(infowindow)
);
}
clusterer.addMarkers(markers);
});
</script>