-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update : AndroidBridege에서 'android' 로 호출할 수 있도록 변경, 도로명 주소까지 반환하도록 변경
- Loading branch information
Showing
2 changed files
with
119 additions
and
88 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,117 +1,73 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<style> | ||
/* 레이어를 화면 전체에 꽉 차도록 설정 */ | ||
#layer { | ||
display: block; | ||
position: fixed; | ||
overflow: hidden; | ||
z-index: 1; | ||
-webkit-overflow-scrolling: touch; | ||
width: 100%; | ||
height: 100%; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
|
||
<!-- iOS에서는 position:fixed 버그가 있음, 적용하는 사이트에 맞게 position:absolute 등을 이용하여 top,left값 조정 필요 --> | ||
<div id="layer" style="display:block;position:fixed;overflow:hidden;z-index:1;-webkit-overflow-scrolling:touch;"> | ||
<div id="layer"></div> | ||
|
||
</div> | ||
|
||
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script> | ||
<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script> | ||
<script> | ||
|
||
|
||
window.addEventListener("message", onReceivedPostMessage, false); | ||
|
||
function onReceivedPostMessage(event){ | ||
//..ex deconstruct event into action & params | ||
var action = event.data.action; | ||
var params = event.data.params; | ||
|
||
console.log("onReceivedPostMessage "+event); | ||
|
||
} | ||
|
||
function onReceivedActivityMessageViaJavascriptInterface(json){ | ||
//..ex deconstruct data into action & params | ||
var data = JSON.parse(json); | ||
var action = data.action; | ||
var params = data.params; | ||
console.log("onReceivedActivityMessageViaJavascriptInterface "+event); | ||
} | ||
|
||
|
||
// 우편번호 찾기 화면을 넣을 element | ||
var element_layer = document.getElementById('layer'); | ||
|
||
function sample2_execDaumPostcode() { | ||
function execDaumPostcode() { | ||
new daum.Postcode({ | ||
oncomplete: function(data) { | ||
|
||
// 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분. | ||
|
||
// 각 주소의 노출 규칙에 따라 주소를 조합한다. | ||
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다. | ||
var fullAddr = data.address; // 최종 주소 변수 | ||
var extraAddr = ''; // 조합형 주소 변수 | ||
|
||
// 기본 주소가 도로명 타입일때 조합한다. | ||
if(data.addressType === 'R'){ | ||
//법정동명이 있을 경우 추가한다. | ||
if(data.bname !== ''){ | ||
extraAddr += data.bname; | ||
} | ||
// 건물명이 있을 경우 추가한다. | ||
if(data.buildingName !== ''){ | ||
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName); | ||
} | ||
// 조합형주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다. | ||
fullAddr += (extraAddr !== '' ? ' ('+ extraAddr +')' : ''); | ||
} | ||
|
||
|
||
var fullRoadAddr = data.roadAddress; // 도로명 주소 변수 | ||
var extraRoadAddr = ''; // 도로명 조합형 주소 변수 | ||
|
||
// 법정동명이 있을 경우 추가한다. (법정리는 제외) | ||
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다. | ||
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){ | ||
if (data.bname !== '' && /[동|로|가]$/g.test(data.bname)) { | ||
extraRoadAddr += data.bname; | ||
} | ||
// 건물명이 있고, 공동주택일 경우 추가한다. | ||
if(data.buildingName !== '' && data.apartment === 'Y'){ | ||
if (data.buildingName !== '' && data.apartment === 'Y') { | ||
extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName); | ||
} | ||
// 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다. | ||
if(extraRoadAddr !== ''){ | ||
if (extraRoadAddr !== '') { | ||
extraRoadAddr = ' (' + extraRoadAddr + ')'; | ||
} | ||
// 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다. | ||
if(fullRoadAddr !== ''){ | ||
if (fullRoadAddr !== '') { | ||
fullRoadAddr += extraRoadAddr; | ||
} | ||
|
||
// 주소만 필요하므로 이것만 전송한다. | ||
window.MysosoApp.processDATA(fullRoadAddr); | ||
}, | ||
width : '100%', | ||
height : '100%' | ||
}).embed(element_layer); | ||
var lotNumberAddress = data.jibunAddress; // 지번 주소 변수 | ||
var roadNameAddress = fullRoadAddr; // 도로명 주소 | ||
|
||
// iframe을 넣은 element를 보이게 한다. | ||
element_layer.style.display = 'block'; | ||
// 도로명 주소와 지번 주소를 안드로이드 네이티브로 전송 | ||
window.android.onPostCodeReceived(roadNameAddress, lotNumberAddress); | ||
}, | ||
width: '100%', | ||
height: '100%' | ||
}).embed(document.getElementById('layer')); | ||
|
||
// iframe을 넣은 element의 위치를 화면의 가운데로 이동시킨다. | ||
document.getElementById('layer').style.display = 'block'; | ||
initLayerPosition(); | ||
} | ||
// 브라우저의 크기 변경에 따라 레이어를 가운데로 이동시키고자 하실때에는 | ||
// resize이벤트나, orientationchange이벤트를 이용하여 값이 변경될때마다 아래 함수를 실행 시켜 주시거나, | ||
// 직접 element_layer의 top,left값을 수정해 주시면 됩니다. | ||
function initLayerPosition(){ | ||
var width = (window.innerWidth || document.documentElement.clientWidth); //우편번호서비스가 들어갈 element의 width | ||
var height = (window.innerHeight || document.documentElement.clientHeight); //우편번호서비스가 들어갈 element의 height | ||
var borderWidth = 5; //샘플에서 사용하는 border의 두께 | ||
|
||
// 위에서 선언한 값들을 실제 element에 넣는다. | ||
element_layer.style.width = width + 'px'; | ||
element_layer.style.height = height + 'px'; | ||
element_layer.style.border = borderWidth + 'px solid'; | ||
// 실행되는 순간의 화면 너비와 높이 값을 가져와서 중앙에 뜰 수 있도록 위치를 계산한다. | ||
element_layer.style.left = (((window.innerWidth || document.documentElement.clientWidth) - width)/2 - borderWidth) + 'px'; | ||
element_layer.style.top = (((window.innerHeight || document.documentElement.clientHeight) - height)/2 - borderWidth) + 'px'; | ||
function initLayerPosition() { | ||
var layer = document.getElementById('layer'); | ||
var width = (window.innerWidth || document.documentElement.clientWidth); // 우편번호 서비스가 들어갈 element의 width | ||
var height = (window.innerHeight || document.documentElement.clientHeight); // 우편번호 서비스가 들어갈 element의 height | ||
|
||
layer.style.width = width + 'px'; | ||
layer.style.height = height + 'px'; | ||
layer.style.left = '0px'; | ||
layer.style.top = '0px'; | ||
} | ||
|
||
// Daum Postcode API를 초기화하고 실행 | ||
window.onload = function() { | ||
execDaumPostcode(); | ||
}; | ||
</script> | ||
</body> | ||
</html> | ||
</html> |