ํ๋ก์ ํธ์ ์นด์นด์ค์ง๋ OPEN API๋ฅผ ์ฌ์ฉํด๋ณด์.
<!DOCTYPE html>
<html lang="">
<head>
<title>index</title>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
</head>
</body>
</html>
/* ๋ฐ์์จ ์ฃผ์ ๋ฐ์ดํฐ๋ฅผ ํ์ธํด๋ณผ ๊ณณ */
<template>
<div class="daummap">
<h1>์ฐํธ๋ฒํธ: <span>{{ zip }}</span></h1>
<h1>๊ธฐ๋ณธ์ฃผ์: <span>{{ addr1 }}</span></h1>
<h1>์์ธ์ฃผ์: <span>{{ addr2 }}</span></h1>
<div ref="embed"></div>
<button @click="showApi">์ฃผ์API ํธ์ถ</button>
</div>
</template>
<script>
export default {
name: 'daumMap',
data() {
return {
zip: '',
addr1: '',
addr2: ''
}
},
methods: {
showApi() {
new window.daum.Postcode({
oncomplete: (data) => {
// ํ์
์์ ๊ฒ์๊ฒฐ๊ณผ ํญ๋ชฉ์ ํด๋ฆญํ์๋ ์คํํ ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ถ๋ถ.
// ๋๋ก๋ช
์ฃผ์์ ๋
ธ์ถ ๊ท์น์ ๋ฐ๋ผ ์ฃผ์๋ฅผ ์กฐํฉํ๋ค.
// ๋ด๋ ค์ค๋ ๋ณ์๊ฐ ๊ฐ์ด ์๋ ๊ฒฝ์ฐ์ ๊ณต๋ฐฑ('')๊ฐ์ ๊ฐ์ง๋ฏ๋ก, ์ด๋ฅผ ์ฐธ๊ณ ํ์ฌ ๋ถ๊ธฐ ํ๋ค.
let fullRoadAddr = data.roadAddress; // ๋๋ก๋ช
์ฃผ์ ๋ณ์
let extraRoadAddr = ''; // ๋๋ก๋ช
์กฐํฉํ ์ฃผ์ ๋ณ์
// ๋ฒ์ ๋๋ช
์ด ์์ ๊ฒฝ์ฐ ์ถ๊ฐํ๋ค. (๋ฒ์ ๋ฆฌ๋ ์ ์ธ)
// ๋ฒ์ ๋์ ๊ฒฝ์ฐ ๋ง์ง๋ง ๋ฌธ์๊ฐ "๋/๋ก/๊ฐ"๋ก ๋๋๋ค.
if(data.bname !== '' && /[๋|๋ก|๊ฐ]$/g.test(data.bname)){
extraRoadAddr += data.bname;
}
// ๊ฑด๋ฌผ๋ช
์ด ์๊ณ , ๊ณต๋์ฃผํ์ผ ๊ฒฝ์ฐ ์ถ๊ฐํ๋ค.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// ๋๋ก๋ช
, ์ง๋ฒ ์กฐํฉํ ์ฃผ์๊ฐ ์์ ๊ฒฝ์ฐ, ๊ดํธ๊น์ง ์ถ๊ฐํ ์ต์ข
๋ฌธ์์ด์ ๋ง๋ ๋ค.
if(extraRoadAddr !== ''){
extraRoadAddr = ' (' + extraRoadAddr + ')';
}
// ๋๋ก๋ช
, ์ง๋ฒ ์ฃผ์์ ์ ๋ฌด์ ๋ฐ๋ผ ํด๋น ์กฐํฉํ ์ฃผ์๋ฅผ ์ถ๊ฐํ๋ค.
if(fullRoadAddr !== ''){
fullRoadAddr += extraRoadAddr;
}
// ์ฐํธ๋ฒํธ์ ์ฃผ์ ์ ๋ณด๋ฅผ ํด๋น ํ๋์ ๋ฃ๋๋ค.
this.zip = data.zonecode; //5์๋ฆฌ ์์ฐํธ๋ฒํธ ์ฌ์ฉ
this.addr1 = fullRoadAddr;
}
}).open() // ํ์
์ผ๋ก ๋์ด๋ค.
}
}
}
</script>
<style>
</style>
}).open()
๋์ ์
}).embed(this.$refs.embed)
๋ก ๋ฐ๊ฟํ์ฉํ๋ค.
์ฐธ๊ณ ํ ํฌ์คํธ : https://chlost.tistory.com/53