고전적인 비동기 패턴 처리 방식은
콜백함수입니다.
카카오 지도 JS API는 Promise를 비동기 함수의 리턴값으로 지원하지 않습니다.
하지만 사용자가 직접 Promise로 wrapping은 가능하죠. 간단합니다.
http://apis.map.kakao.com/web/sample/addr2coord/
이 예제를 Promise를 사용하는 코드로 만들어 보면,
const mapContainer = document.getElementById('map');
const mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
const map = new kakao.maps.Map(mapContainer, mapOption);
const geocoder = new kakao.maps.services.Geocoder();
const createOverlay = result => {
const coords = new kakao.maps.LatLng(result[0].y, result[0].x);
const marker = new kakao.maps.Marker({
map: map,
position: coords
});
const infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>'
});
infowindow.open(map, marker);
map.setCenter(coords);
};
const addressSearch = address => {
return new Promise((resolve, reject) => {
geocoder.addressSearch(address, function(result, status) {
if (status === kakao.maps.services.Status.OK) {
resolve(result);
} else {
reject(status);
}
});
});
};
// async-await
(async () => {
try {
const result = await addressSearch('제주특별자치도 제주시 첨단로 242');
createOverlay(result);
} catch (e) {
console.log(e);
}
})();
// or chaining using then
//addressSearch('제주특별자치도 제주시 첨단로 242')
// .then(createOverlay)
// .catch(console.log);