본문 바로가기
Project/순살 아파트

순살 아파트) map.html 코드

공부하려구요 2023. 8. 27. 01:05
  1. <head>: 문자 인코딩, 뷰포트 설정, 페이지 제목 등이 포함됩니다.
  2. <style>: CSS 스타일 입니다. 여기서 body, map, .infowindow_content 등에 대한 스타일이 있습니다.
  3. <body>:
    • div id="map": 이 div 요소는 카카오 지도 API를 사용하여 지도를 표시하는 영역입니다.
    • script src="/buildingData.js": 이 스크립트 태그는 외부 JavaScript 파일인 buildingData.js를 가져옵니다.
  4. inline JavaScript 코드
    • 건물 데이터(buildingData)를 활용해 각 건물 위치에 마커와 정보창(Infowindow) 생성
    • 모바일과 데스크톱 환경에 따라 마커 클릭/마우스 오버 시 다르게 동작하도록 설정
    • 정보창의 내용을 생성하는 함수(createInfowindowContent) 정의

 

map.html 코드입니다!

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>지도 페이지</title>
    <style>
      /* 기본 스타일 설정 */
      body {
        background-color: #f0f0f0;
      }
      #map {
        width: 95%;
        height: 95vh;
        margin: 20px auto;
        border-radius: 10px;
        border: 1px solid #ccc;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        overflow: hidden;
      }
      .infowindow_content {
        display: flex;
        flex-direction: column;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #ffffff;
        padding: 15px;
        max-width: 250px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }
      .info_text {
        margin-left: 10px;
      }
      .info_text p {
        margin: 4px 0;
        line-height: 1.5;
        color: #333;
      }
      .info_text p span {
        font-weight: bold;
      }
      .info_text p.title span,
      .info_text p.rebar_count span {
        color: #ff0000;
      }
      .info_text strong {
        color: #333;
        font-weight: 600;
      }
    </style>
    <script src="/loadKakaoScript"></script>
  </head>
  <body>
    <div id="map"></div>
    <script src="/buildingData.js"></script>
    <script src="/buildingData.js"></script>
    <script>
      // 건물 데이터
      var 데이터 = buildingData;
      var mapContainer = document.getElementById("map");
      // 지도 옵션 설정
      var mapOption = {
        center: new kakao.maps.LatLng(36.1404963, 128.315128),
        level: 13,
        mapTypeId: kakao.maps.MapTypeId.ROADMAP,
      };

      // 지도 생성
      var map = new kakao.maps.Map(mapContainer, mapOption);

      // 마커 클러스터러 설정
      var clusterer = new kakao.maps.MarkerClusterer({
        map: map,
        averageCenter: true,
        minLevel: 10,
      });

      // 마커 배열 선언
      var markers = [];

      function closeAllInfoWindows() {
        for (var i = 0; i < markers.length; i++) {
          markers[i].infowindow.close();
        }
      }

      // 건물 데이터에 대해 마커 및 정보창 생성
      데이터.forEach(function (data) {
        var position = new kakao.maps.LatLng(data.lat, data.lng);

        var marker = new kakao.maps.Marker({
          position: position,
        });

        var infowindow = new kakao.maps.InfoWindow();
        marker.infowindow = infowindow;

        markers.push(marker);

        if (
          /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
            navigator.userAgent
          )
        ) {
          // 모바일 환경 - 클릭 이벤트 설정
          kakao.maps.event.addListener(marker, "click", function () {
            if (marker.infowindow.getMap()) {
              marker.infowindow.close();
            } else {
              closeAllInfoWindows();
              infowindow.setContent(createInfowindowContent(data));
              infowindow.open(map, marker);
            }
          });
        } else {
          // 데스크톱 환경 - 마우스 오버/아웃 이벤트 설정

          kakao.maps.event.addListener(marker, "mouseover", function () {
            closeAllInfoWindows();
            infowindow.setContent(createInfowindowContent(data));
            infowindow.open(map, marker);
          });

          kakao.maps.event.addListener(marker, "mouseout", function () {
            infowindow.close();
          });
        }

        clusterer.addMarker(marker);
      });

      // 정보창 내용 생성 함수
      function createInfowindowContent(data) {
        var missingRebarPercentage =
          data.missingRebars != null
            ? (data.missingRebars / data.totalRebars) * 100
            : null;

        var missingRebarText =
          missingRebarPercentage !== null
            ? `${data.missingRebars} / ${
                data.totalRebars
              } (${missingRebarPercentage.toFixed(2)}%)`
            : `조사 중 / ${data.totalRebars}`;

        // 정보창 템플릿 작성
        return `
          <div class="infowindow_content">
            <div class="info_text">
              <p class="title"><strong>지구명:</strong> <span>${data.apartment}</span></p>
              <p class="rebar_count"><strong>누락된 철근 개수:</strong> <span>${missingRebarText}</span></p>
              <p><strong>원인:</strong> ${data.cause}</p>
              <p><strong>보강방법:</strong> ${data.reinforcement}</p>
              <p><strong>설계 기업:</strong> ${data.architect}</p>
              <p><strong>시공사:</strong> ${data.constructor}</p>
              <p><strong>감리:</strong> ${data.supervisor}</p>
              <p><strong>입주여부:</strong> ${data.etc}</p>
            </div>
          </div>
        `;
      }
    </script>
  </body>
</html>

 

 

반응형

'Project > 순살 아파트' 카테고리의 다른 글

순살 아파트) notice.html  (0) 2023.08.27
순살 아파트) news.html  (0) 2023.08.27
순살 아파트) index.html 코드  (0) 2023.08.27
순살 아파트) 홈페이지 html 구성  (0) 2023.08.27
순살 아파트) 카카오 개발자로 카카오맵 API 사용하기  (0) 2023.08.27

'Project/순살 아파트' Related Articles

티스토리툴바