jQuery + 네이버맵을 Vue 변환 방법
jQuery 를 기반으로 네이버맵을 활용한 서비스가 하나 있다.
지도 위에 각 오브젝트 좌표를 표시하여 모니터링을 보여준다.
Vue/Cli 를 설치하여 변환하고자 한다.
먼저 기본 프로젝트를 생성하자
$ vue create my-project
기본 프로젝트 내용을 만들어 준다.
네이버맵을 사용하기 위해서 /public 폴더에서 index.html 파일에 추가한다.
바로 아래에 jQuery 를 추가해준다.
이제 App.vue 파일을 아래와 같이 수정해준다.
이제 /Component 폴더에 NaverMap.vue 파일을 생성한다.
이와 같이 하면 기존에 만들어진 소스를 거의 그대로 이용할 수 있다.
여기서 하나씩 분리 가능한 부분을 떼어서 적용을 해보면 차근차근 할 수 있을 것이다.
지도 위에 각 오브젝트 좌표를 표시하여 모니터링을 보여준다.
Vue/Cli 를 설치하여 변환하고자 한다.
먼저 기본 프로젝트를 생성하자
$ vue create my-project
기본 프로젝트 내용을 만들어 준다.
네이버맵을 사용하기 위해서 /public 폴더에서 index.html 파일에 추가한다.
<script type='text/javascript' src='https://openapi.map.naver.com/openapi/v3/maps.js?clientId=testId&callback=initMap'> </script>
바로 아래에 jQuery 를 추가해준다.
<script src='https://code.jquery.com/jquery-1.12.4.js'></script>
이제 App.vue 파일을 아래와 같이 수정해준다.
<template>
<div>
<NaverMap></NaverMap>
</div>
</template>
<script>
import NaverMap from './components/NaverMap.vue'
export default {
name: 'App',
components: {
NaverMap
}
}
</script>
이제 /Component 폴더에 NaverMap.vue 파일을 생성한다.
<template>
<div id='wrap' class='section'>
<div id="naverMap">
</div>
</div>
</template>
<script>
export default {
name: 'hello',
data() {
return {
}
},
mounted: function() {
var map = null;
var markers = [];
var infoWindows = [];
initMap();
function initMap() {
map = new naver.maps.Map(document.getElementById('naverMap'), {
center: korail,
zoom: 10,
zoomControl: true,
zoomControlOptions: {
position: naver.maps.Position.RIGHT_TOP
}
});
var marker = new naver.maps.Marker({
position: new naver.maps.LatLng(36, 127),
map: map
});
markers.push(marker);
var infoWindow = new naver.maps.InfoWindow({
content: '표시내용'
});
infoWindows.push(infoWindow);
for(var i = 0; i < markers.length; i++) {
naver.maps.Event.addListener(markers[i], 'click', getClickHandler(i));
}
}
} // end_mount
}
</script>
<style>
#naverMap {
height: 100vh;
min-height: 100vh;
width: 100%;
}
</style>
이와 같이 하면 기존에 만들어진 소스를 거의 그대로 이용할 수 있다.
여기서 하나씩 분리 가능한 부분을 떼어서 적용을 해보면 차근차근 할 수 있을 것이다.
댓글
댓글 쓰기