window.html이라는 변수에 반복문을 돌면서 값을 넣고 찍고 싶은데 콘솔로그에도 값이 뜨지않고
innerhtml로도 값이 추가 되지않습니다. 그러나 콘솔로그에 직접 window.html 값을 로그에 띄우면 값이 제대로 찍힙니다.
이문제에 해결법을 알고싶습니다.
$(function() {
// Geolocation API에 액세스할 수 있는지를 확인
if (navigator.geolocation) {
//위치 정보를 얻기
navigator.geolocation.getCurrentPosition (function(pos) {
var coords = new daum.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
// 지도를 보여준다.
mapContainer.style.display = "block";
map.relayout();
// 지도 중심을 변경한다.
map.setCenter(coords);
// 마커를 결과값으로 받은 위치로 옮긴다.
marker.setPosition(coords)
$.ajax({
method: "GET",
url: "https://8oi9s0nnth.apigw.ntruss.com/corona19-masks/v1/storesByGeo/json",
data: {lng: pos.coords.longitude, lat: pos.coords.latitude, m: 2500},
})
.done(function (msg) {
var position = [];
for(var j in msg.stores){
var push = position.push({latlng: new kakao.maps.LatLng(msg.stores[j].lat, msg.stores[j].lng), status: msg.stores[j].remain_stat, text: msg.stores[j].name, addr : msg.stores[j].addr, stock : msg.stores[j].stock_at});
}
for(const i in position) {
if (position[i].status == "plenty"){
var imageSrc = "https://arcspace.kr/project/maskfinder/mask/100p.png";
}
if (position[i].status == "some"){
var imageSrc = "https://arcspace.kr/project/maskfinder/mask/30p.png";
}
if (position[i].status == "few"){
var imageSrc = "https://arcspace.kr/project/maskfinder/mask/2p.png";
}
if (position[i].status == "empty"){
var imageSrc = "https://arcspace.kr/project/maskfinder/mask/p.png";
}
var imageSize = new kakao.maps.Size(24, 35);
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
const marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: position[i].latlng, // 마커를 표시할 위치
title : position[i].text, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image : markerImage, // 마커 이미지
text: position[i].text
});
kakao.maps.event.addListener(marker, 'click', function() {
var geocoder = new daum.maps.services.Geocoder();
var callback = function(result, status){
if(status === daum.maps.services.Status.OK){
console.log(result[0].address.address_name);
if (position[i].status == "plenty"){
var status = "충분";
}
if (position[i].status == "some"){
var status = "보통";
}
if (position[i].status == "few"){
var status = "부족";
}
if (position[i].status == "empty"){
var status = "품절";
}
var iwContent = '<div style="padding:5px; font-size: xx-small;">이름 : '+ position[i].text + '<br/>재고 현황 : ' + status + '<br/>입고 일자 : '+ position[i].stock + ' ' + '<br><a href="https://map.kakao.com/?map_type=TYPE_MAP&q=' + result[0].address.address_name + 'style="color:blue" target="_blank">큰지도보기</a></div>',
iwRemoveable = true;
var infowindow = new kakao.maps.InfoWindow({
content: iwContent,
removable : iwRemoveable
});
infowindow.open(map, marker);
}
};
const lang = marker.getPosition().getLng();
const lat = marker.getPosition().getLat();
geocoder.coord2Address(lang, lat, callback);
});
}
$( '#all').empty();
window.html = '';
for(var i in position) {
if (position[i].status == "plenty"){
var status = "충분";
// var row = my_tbody.insertRow(0); // 상단에 추가
var geocoder = new daum.maps.services.Geocoder();
var callback = function(result, status){
if(status === daum.maps.services.Status.OK){
var locate = result[0].address.address_name
window.html = window.html + '<div id="mcard"><h1 id="mname" style="font-family: \'Do Hyeon\', sans-serif;">' + position[i].text + '</h1><p id="mtext">' + position[i].addr + '</p><p id="mtext">' + position[i].stock + '</p><div id="mbt" OnClick="location.href=\'https://map.kakao.com/?map_type=TYPE_MAP&q=' + locate + '\'"><img src="https://arcspace.kr/project/maskfinder/mask/map.png" style="width:20px; height:20px; padding-top:2px; padding-left:22px;"/><p id="mbtp" style="font-family: \'Stylish\', sans-serif;">지도에서 보기</p></div><br/>'
//</div><br/>result[0].address.address_name
//'<div id="mbt" OnClick="location.href=\'https://map.kakao.com/?map_type=TYPE_MAP&q=\'' + result[0].address.address_name'"><img src="https://arcspace.kr/project/maskfinder/mask/map.png" style="width:20px; height:20px; padding-top:2px; padding-left:22px;"/><p id="mbtp" style="font-family: \'Stylish\', sans-serif;">지도에서 보기</p>'
};
}
geocoder.coord2Address(position[i].latlng.getLng(), position[i].latlng.getLat(), callback);
}
}
for(var i in position) {
if (position[i].status == "some"){
var status = "보통";
// var row = my_tbody.insertRow(0); // 상단에 추가
var geocoder = new daum.maps.services.Geocoder();
var callback = function(result, status){
if(status === daum.maps.services.Status.OK){
var locate = result[0].address.address_name
window.html = window.html + '<div id="mcard"><h1 id="mname" style="font-family: \'Do Hyeon\', sans-serif;">' + position[i].text + '</h1><p id="mtext">' + position[i].addr + '</p><p id="mtext">' + position[i].stock + '</p><div id="mbt" OnClick="location.href=\'https://map.kakao.com/?map_type=TYPE_MAP&q=' + locate + '\'"><img src="https://arcspace.kr/project/maskfinder/mask/map.png" style="width:20px; height:20px; padding-top:2px; padding-left:22px;"/><p id="mbtp" style="font-family: \'Stylish\', sans-serif;">지도에서 보기</p></div><br/>'
//</div><br/>result[0].address.address_name
//'<div id="mbt" OnClick="location.href=\'https://map.kakao.com/?map_type=TYPE_MAP&q=\'' + result[0].address.address_name'"><img src="https://arcspace.kr/project/maskfinder/mask/map.png" style="width:20px; height:20px; padding-top:2px; padding-left:22px;"/><p id="mbtp" style="font-family: \'Stylish\', sans-serif;">지도에서 보기</p>'
};
}
geocoder.coord2Address(position[i].latlng.getLng(), position[i].latlng.getLat(), callback);
}
}
for(var i in position) {
if (position[i].status == "few"){
var status = "적음";
// var row = my_tbody.insertRow(0); // 상단에 추가
var geocoder = new daum.maps.services.Geocoder();
var callback = function(result, status){
if(status === daum.maps.services.Status.OK){
var locate = result[0].address.address_name
window.html = window.html + '<div id="mcard"><h1 id="mname" style="font-family: \'Do Hyeon\', sans-serif;">' + position[i].text + '</h1><p id="mtext">' + position[i].addr + '</p><p id="mtext">' + position[i].stock + '</p><div id="mbt" OnClick="location.href=\'https://map.kakao.com/?map_type=TYPE_MAP&q=' + locate + '\'"><img src="https://arcspace.kr/project/maskfinder/mask/map.png" style="width:20px; height:20px; padding-top:2px; padding-left:22px;"/><p id="mbtp" style="font-family: \'Stylish\', sans-serif;">지도에서 보기</p></div><br/>'
//</div><br/>result[0].address.address_name
//'<div id="mbt" OnClick="location.href=\'https://map.kakao.com/?map_type=TYPE_MAP&q=\'' + result[0].address.address_name'"><img src="https://arcspace.kr/project/maskfinder/mask/map.png" style="width:20px; height:20px; padding-top:2px; padding-left:22px;"/><p id="mbtp" style="font-family: \'Stylish\', sans-serif;">지도에서 보기</p>'
};
}
var locate = geocoder.coord2Address(position[i].latlng.getLng(), position[i].latlng.getLat(), callback);
geocoder.coord2Address(position[i].latlng.getLng(), position[i].latlng.getLat(), callback);
}
}
console.log(window.html)
var div = document.getElementById('all');
div.innerHTML = window.html;
//console.log(msg.stores);
//console.log(msg.stores[0].addr);
//console.log(msg.stores[0].remain_stat);
//console.log(msg.stores[0].lat);
//console.log(msg.stores[0].lng);
});
});
} else {
alert("이 브라우저에서는 Geolocation이 지원되지 않습니다.")
}
});