[javascript] Isotope을 사용하여 지도 위에 위치 정보를 표시하는 방법은 무엇인가요?

01 Dec 2023

javascript

HTML 마크업: 먼저, 위치 정보를 표시할 컨테이너 역할을 하는 HTML 요소를 생성해야 합니다. 이 예제에서는 div 요소를 사용합니다. ```html

...

2. CSS 스타일링:
위치 정보를 표시할 컨테이너 및 아이템의 스타일을 지정해야 합니다. 이 예제에서는 컨테이너 크기와 아이템의 가로/세로 크기를 지정합니다. 물론 필요에 따라 스타일을 추가적으로 변경할 수 있습니다.
```css
.map-container {
  width: 800px;
  height: 600px;
}

.map-item {
  width: 200px;
  height: 200px;
}

자바스크립트 코드: 위치 정보를 동적으로 표시하기 위해 이소토프를 사용합니다. 이 코드는 자바스크립트가 로드된 후 실행되어야 합니다. 먼저, 위치 정보를 가져와서 아이템을 생성한 다음, 이소토프를 초기화하여 위치 정보를 배치합니다. ```javascript // 위치 정보를 가져와서 배열로 저장 var locations = [ { lat: 37.5665, lng: 126.9780 }, { lat: 36.3504, lng: 127.3845 }, { lat: 35.1796, lng: 129.0756 }, … ];

// 위치 정보에 기반하여 아이템 생성 var items = locations.map(function(location) { return ‘<div class="map-item" data-lat="' + location.lat + '" data-lng="' + location.lng + '"></div>’; });

// 컨테이너에 아이템 추가 $(‘.map-container’).html(items.join(‘’));

// 이소토프 초기화 var $container = $(‘.map-container’).isotope({ itemSelector: ‘.map-item’, layoutMode: ‘fitRows’ }); ```

위의 코드 예제는 이소토프를 사용하여 위치 정보를 동적으로 표시하는 방법을 보여줍니다. 위치 정보는 locations 배열에 저장되어 있으며, 각 위치 정보는 위도(lat)와 경도(lng)로 구성됩니다. 이 정보를 기반으로 아이템이 생성되고 컨테이너에 배치됩니다.

이소토프를 사용하면 위치 정보가 있는 아이템을 쉽게 배치할 수 있습니다. 레이아웃 모드를 fitRows로 설정하여 가로 방향으로 아이템을 정렬할 수 있습니다. 필요에 따라 추가적인 스타일링이나 동적 인터랙션을 구현할 수도 있습니다.

더 자세한 내용은 이소토프 공식 문서를 참조하시기 바랍니다.

참조:

Isotope 공식 문서: https://isotope.metafizzy.co/