javascript25 [Leaflet] 플러그인 PolylineDecorator 사용하기 [Leaflet] 플러그인 PolylineDecorator 사용하기 Leaflet 플러그인 중에서, Markers & renders에 있는 Leaflet.PolylineDecorator를 사용하여 폴리라인을 꾸며보겠습니다.https://github.com/bbecquet/Leaflet.PolylineDecorator 깃헙 페이지에서 사용법을 확인할 수 있습니다. 간단하게 사용하기 위해 CDN(https://cdnjs.com/libraries/leaflet-polylinedecorator)에 있는 leaflet-polylinedecorator.js를 사용하겠습니다. Leaflet CSS, JS 추가 leaflet 사용을 위해서 css, js를 포함하는 기본 코드를 작성합니다. leaflet-polyline.. 2018. 1. 14. [Leaflet] 시작하기 Quick Start Guide [Leaflet] 시작하기 Quick Start Guide http://leafletjs.com/examples/quick-start/ 에 있는 가이드 문서를 보면서 실습을 진행하겠습니다. Leaflet CSS, JS 추가 leaflet 사용을 위해서 css, js를 포함하는 기본 코드를 작성합니다. leaflet.html(또는 원하는 파일명)로 파일을 저장합니다. 지도 영역 추가 body 태그안에 맵을 표출할 영역을 div 태그로 생성합니다. 브라우저 전체에 표출되도록 높이를 100%로 하는 스타일을 추가하였습니다. 지도 생성 스크립트 vworld 에서 제공하는 타일맵 서비스를 이용합니다. (http://xdworld.vworld.kr:8080/2d/Base/201710/{z}/{x}/{y}.png)지.. 2018. 1. 13. JSP list to javascript JSP list to javascript JSP 로 부터 넘어온 리스트 객체를 자바스크립트 리스트 객체로 변환합니다. var obj_list = [ { 'seq' : '${item.seq}' , 'type' : '${item.type}' , 'title' : '${item.title}' , 'content' : '${item.content}' , 'lon_x' : '${item.lon_x}' , 'lat_y' : '${item.lat_y}' } ${not loop.last ? ',' : ''} ]; 리스트를 이용하여 처리합니다. // 이벤트 목록 마커 생성 for (var i = 0, len = obj_list.length; i < len; i++) { var item = obj_list[i]; // c.. 2017. 5. 23. [Vue.js] v-for 에서 index 사용하기 [Vue.js] v-for 에서 index 사용하기 v-for 기본 사용 {{ item.message }} index 사용 {{ index }} - {{ item.message }} method 추가 methods: { chr: function(index){ return String.fromCharCode(65 + index); }, // 생략... } HTML 수정 A{{ item.buld_nm }} {{ chr(index) }}{{ item.buld_nm }} v-for 인덱스에 따라 다른 결과가 나오도록 함.인덱스 0 => `A` 1 => `B` 2 => `C` ... 출처 https://vuejs.org/v2/guide/list.html 2017. 4. 23. [javascript] Vue.js vs Angular.js 비교 [javascript] Vue.js vs Angular.js 비교 Modules / Components 모듈은 컨트롤러, 지시어 등과 같은 다른 엔티티를 포함하는 Angular의 컨테이너입니다. Vue에서는 대부분의 구성 요소를 포함합니다. Angular Modules angular.module('myModule', [...]); Vue components Vue.extend({ data: function(){ return {...}}, created: function(){...} }); directives 지시자 Vue에서는 지시어가 강력하지 않습니다. 그들은 더 집중된 것처럼 보인다. Angular에서는 지시어가 Vue에서 컴포넌트와 매우 흡사 한 많은 것들이 될 수 있습니다. Angular dire.. 2017. 3. 28. [javascript] disabled 속성을 포함한 jquery.serialize() [javascript] jquery.serialize() with disabled attribute jquery.serialize() 사용시에 요소가 disabled 가 되어 있으면, serialize에 포함되지 않습니다.따라서, serialize 이전에 disabled 속성을 지우고 처리한 후 다시 속성을 입력합니다.원래 코드. var params = $("#modal *").serialize(); 수정 코드. var target = $("#modal *"); var disabled = target.find(':disabled').removeAttr('disabled'); var params = target.serialize(); disabled.attr('disabled', 'disabled'); 참.. 2017. 3. 19. 이전 1 2 3 4 5 다음