[Spring Boot] 카카오 지도 api 활용하여 지도 출력하기

 

 

 

 

프로그래밍 세계를 탐구합시다.

 

 

 

 

Spring Boot에서 카카오 지도 api를 활용하여 페이지에 지도를 출력할 수 있습니다.

 

 

구현 화면

 

 

 

충전소 찾기로 들어오면 왼쪽 사이드바를 이용하여 지정한 반경 이내의 전기차 충전소 위치를 확인할 수 있고,  전기차 카테고리별로 항목을 선택하여 전기차 위치를 볼 수 있습니다.

 

카테고리는 지역구, 운영기관, 충전기타입, 시설구분이 있으며 카테고리 별로 지도에 나타나는 핀 이미지가 다르므로 동시에 여러 정보를 식별할 수 있습니다.

 

 

 

충전소 찾기로 들어오면 왼쪽 사이드바를 이용하여 지정한 반경 이내의 전기차 충전소 위치를 확인할 수 있고,  전기차 카테고리별로 항목을 선택하여 전기차 위치를 볼 수 있습니다.

 

카테고리는 지역구, 운영기관, 충전기타입, 시설구분이 있으며 카테고리 별로 지도에 나타나는 핀 이미지가 다르므로 동시에 여러 정보를 식별할 수 있습니다.

 

 

 

데이터베이스는 h2 database 활용했습니다.

 

https://www.h2database.com/html/main.html

H2 Database Engine

 

 

 

작성 코드

 

 

MapController.java

 

package com.example.board.controller;

import java.time.LocalDate;
import java.util.List;
import java.util.Random;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;

import com.example.board.model.Station;
import com.example.board.model.Store;
import com.example.board.model.User;
import com.example.board.model.Restaurant;
import com.example.board.model.Coffee;
import com.example.board.model.Coupon;
import com.example.board.repository.StationRepository;
import com.example.board.repository.StoreRepository;
import com.example.board.repository.CoffeeRepository;
import com.example.board.repository.CouponRepository;
import com.example.board.repository.RestaurantRepository;

@Controller
public class MapController {
    
    @Autowired
    StationRepository stationRepository;
    @Autowired
    CoffeeRepository coffeeRepository;
    @Autowired
    StoreRepository storeRepository;
    @Autowired
    RestaurantRepository restaurantRepository;
    @Autowired
    CouponRepository couponRepository;
    @Autowired
    HttpSession session;
    

    @GetMapping("/tetest/data")
    @ResponseBody
    public List<Station> tetestData(){       
       List<Station> excels = stationRepository.findAll();
        return excels;
    }

    @GetMapping("/tetest")
    public String tetest(Model model){
       
       List<Restaurant> excels = restaurantRepository.findAll();
       model.addAttribute("excels", excels);
        return "tetest";
    }
    
   @PostMapping("/tetest")
   public String tetestPost(@ModelAttribute Station excel) {
    //   stationRepository.save(excel);
      return "redirect:/tetest";
   }

   @GetMapping("/map")
   public String map(Model model) {
      List<Station> excel14s = stationRepository.findAll();
      model.addAttribute("excel14s", excel14s);
      return "/map/map";
   }

   @PostMapping("/map")
   public String mapPost(@ModelAttribute Station excel14) {
      stationRepository.save(excel14);
      return "redirect:map/map";
   }
    @GetMapping("/coffee/data")
    @ResponseBody
    public List<Coffee> coffeeData(){       
       List<Coffee> shops = coffeeRepository.findAll();
        return shops;
    }
    @GetMapping("/store/data")
    @ResponseBody
    public List<Store> storeData(){       
       List<Store> shops = storeRepository.findAll();
        return shops;
    }
    @GetMapping("/restaurant/data")
    @ResponseBody
    public List<Restaurant> restaurantData(){       
       List<Restaurant> shops = restaurantRepository.findAll();
        return shops;
    }
   @GetMapping("/map/coffee")
   public String coffee(Model model, @ModelAttribute Coupon coupon){
      List<Coffee> coffeeshop = coffeeRepository.findAll();
      model.addAttribute("coffeeshop", coffeeshop);
      List<Store> storeshop = storeRepository.findAll();
      model.addAttribute("storeshop", storeshop);
      List<Restaurant> restaurant = restaurantRepository.findAll();
      model.addAttribute("restaurant", restaurant);
      // couponRepository.save(coupon);
      return"map/coffee";
   }
   @PostMapping("/couponsave")
   @ResponseBody
   public String saveCoupon(@RequestBody Coupon coupon){
      
      User user =(User) session.getAttribute("user_info");
      
      // 사용자가 이미 다운로드한 쿠폰의 수를 확인
      List<Coupon> userCoupons = couponRepository.findByUser(user);

      int totalCouponCount = 0;
      for(Coupon singleCoupon : userCoupons) {
         totalCouponCount += singleCoupon.getCount();
      }

      if (totalCouponCount > 3) {
        return "쿠폰 다운로드 횟수를 초과하였습니다.";
      } else {
         Coupon newCoupon = new Coupon();
         newCoupon.setUser(user);

         String uniqueCode = Long.toString(Math.abs(new Random().nextLong()),36).substring(0,12);
         newCoupon.setCode(uniqueCode);
         totalCouponCount += 1;
         newCoupon.setCount(totalCouponCount);
         newCoupon.setName(coupon.getName());
         newCoupon.setStartDate(LocalDate.now());
         newCoupon.setEndDate(LocalDate.now().plusMonths(1));

         couponRepository.save(newCoupon);
      
      }

      return "저장완료";
   }
   
   @GetMapping("/where")
   public String where(){
      return"where";
   }
   @GetMapping("/chargingSearch")
   public String chargingSearch() {
      return "map/chargingSearch";
   }

}

 

 

 

ChargerStatus.java

 

package com.example.board.model;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.ManyToOne;
import lombok.Data;

@Entity
@Data
public class ChargerStatus {

  @Id
  @GeneratedValue(strategy = GenerationType.AUTO)
  private long id;

  private long quantity;

  @ManyToOne
  ChargerStatusYear chargerStatusYear;

  @ManyToOne
  ChargerStatusRegion chargerStatusRegion;
}

 

 

ChargerStatusRegion.java

 

package com.example.board.model;

import java.util.ArrayList;
import java.util.List;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.OneToMany;
import lombok.Data;

@Entity
@Data
public class ChargerStatusRegion {

  @Id
  @GeneratedValue(strategy = GenerationType.AUTO)
  private long id;

  private String region;

  @OneToMany(mappedBy = "chargerStatusRegion")
  List<ChargerStatus> chargerStatus2 = new ArrayList<>();
}

 

 

ChargerStatusYear.java

 

package com.example.board.model;

import java.util.ArrayList;
import java.util.List;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.OneToMany;
import lombok.Data;

@Entity
@Data
public class ChargerStatusYear {

  @Id
  @GeneratedValue(strategy = GenerationType.AUTO)
  private long id;

  private String year;

  @OneToMany(mappedBy = "chargerStatusYear")
  List<ChargerStatus> chargerStatus = new ArrayList<>();
}

 

Chargings.java

 

package com.example.board.model;

import java.io.Serializable;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

import lombok.Data;

@Entity
@Data
public class Chargings implements Serializable {
    @Id
	@GeneratedValue(strategy = GenerationType.AUTO)
	private long id;
	private String city;
	private String location;
	private String address;
	private int fastch;
    private int slowch;
	private double latitude;
	private double longitude;

}

 

 

ChargerStatusRegionRepository.java

 

package com.example.board.repository;

import com.example.board.model.ChargerStatusRegion;
import com.example.board.model.ChargerStatusYear;
import org.springframework.data.jpa.repository.JpaRepository;

public interface ChargerStatusRegionRepsoitory
  extends JpaRepository<ChargerStatusRegion, Long> {
  ChargerStatusRegion findByRegion(String region);
}

 

 

ChargerStatusRepository.java

 

package com.example.board.repository;

import com.example.board.model.ChargerStatus;
import com.example.board.model.ChargerStatusRegion;
import com.example.board.model.ChargerStatusYear;
import java.util.Optional;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.repository.query.Param;

public interface ChargerStatusRepository
  extends JpaRepository<ChargerStatus, Long> {
  Optional<ChargerStatus> findById(Long id);
  Optional<ChargerStatus> findByChargerStatusRegionAndChargerStatusYear(ChargerStatusRegion chargerStatusRegion, ChargerStatusYear chargerStatusYear);

  // Long getQuantityByChargerStatusYearAndChargerStatusRegion(
  //   ChargerStatusYear chargerStatusYear,
  //   ChargerStatusRegion chargerStatusRegion
  // );
}

 

 

ChargerStatusYearRepository.java

 

package com.example.board.repository;

import com.example.board.model.ChargerStatus;
import com.example.board.model.ChargerStatusYear;
import org.springframework.data.jpa.repository.JpaRepository;

public interface ChargerStatusYearRepsoitory
  extends JpaRepository<ChargerStatusYear, Long> {
  ChargerStatusYear findByYear(String year);
}

 

 

ChargingsRepository.java

 

package com.example.board.repository;

import java.util.Optional;

import org.springframework.data.jpa.repository.JpaRepository;

import com.example.board.model.Chargings;

public interface ChargingsRepository extends JpaRepository<Chargings, Long> {
    Optional<Chargings> findById(int id);
}

 

 

chargingSearch.html

 

<!DOCTYPE html>
<html lang="en">

<style>
    .btn-primary {
        background-color: #efc19d;
        border-color: #efc19d;
        color: black;
    }
</style>

<body>
    <div class="container mt-5">
        <div>
            <h2>Search Charging Stations</h2>

            <div id='map' style='width:500px;height:400px;'></div>

            <script type="text/javascript"
                src="//dapi.kakao.com/v2/maps/sdk.js?appkey=개인 appkey"></script>

            <script src="https://unpkg.com/"></script>



            <script type='text/javascript'>
                let map;
                let markers =[];
                navigator.geolocation.getCurrentPosition(function (position) {
                    const lat = position.coords.latitude;
                    const lng = position.coords.longitude;
                    createMap(lat, lng);
                    getData();
                    createMarker2(lat,lng);
                });
                function createMap(lat, lng) {
                    const container = document.getElementById('map');
                    const options = {
                        center: new kakao.maps.LatLng(lat, lng),
                        level: 6
                    };
                    map = new kakao.maps.Map(container, options);
                }

                function getData(){
                    navigator.geolocation.getCurrentPosition(function (position) {
                    const lat = position.coords.latitude;
                    const lng = position.coords.longitude;
                    fetch('/tetest/data')
                    .then(response => response.json())
                    .then(data =>{
                        data.forEach(v=> {
                            const stationlat = v.latitude;
                            const stationlng = v.longitude;
                            
                            
                            let distancesArray = [];
                            let distanceInKm = getDistanceFromLatLonInKm( lng,lat, stationlng, stationlat);
                            
                            if (distanceInKm <= 2) {
                                createMarker(stationlat,stationlng);
                                }
                            });
                        }) 
                            
                    }
                    );
                    }
                    function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {
                        var R = 6371; // Radius of the earth in km
                        var dLat = deg2rad(lat2 - lat1);  // deg2rad below
                        var dLon = deg2rad(lon2 - lon1);
                        var a =
                            Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                            Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
                            Math.sin(dLon / 2) * Math.sin(dLon / 2)
                            ;
                        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
                        var d = R * c; // Distance in km
                        return d;
                    }
                    function deg2rad(deg) {
                        return deg * (Math.PI / 180)
                    }

            function createMarker(lat,lng){
                const markerPosition = new kakao.maps.LatLng(lat,lng);
                var imageSrc = 'https://cdn-icons-png.flaticon.com/512/7512/7512521.png', // 마커이미지의 주소입니다    
                imageSize = new kakao.maps.Size(50, 52), // 마커이미지의 크기입니다
                imageOption = {offset: new kakao.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
                // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
                var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
                const marker = new kakao.maps.Marker({
                position: markerPosition,
                image: markerImage
            });
            markers.push(marker);
            marker.setMap(map);
            }
            function createMarker2(lat,lng){
                
                const markerPosition = new kakao.maps.LatLng(lat,lng);
                var imageSrc = "mini.png", // 마커이미지의 주소입니다    
                imageSize = new kakao.maps.Size(50, 52), // 마커이미지의 크기입니다
                imageOption = {offset: new kakao.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
                // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
                var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
                const marker = new kakao.maps.Marker({
                position: markerPosition,
                image: markerImage
            });
            markers.push(marker);
            marker.setMap(map);
            }
                
            </script>
        </div>
    </div>

</body>

</html>

 

 

search.html

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

</html>
<html lang="en">

<head th:replace="common/head">

</head>
<style>
    @font-face {
        font-family: 'TheJamsil5Bold';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
    }

    body {
        font-family: 'TheJamsil5Bold';
        height: 100vh;
        /* 화면 높이의 100%로 설정 */
        background-color: #000;
        background-size: cover;
        /* 이미지를 화면에 맞게 조절 */
        background-repeat: no-repeat;
        /* 이미지 반복을 중지 */
    }

    .btn {
        background-color: rgb(228, 179, 93);
        border-color: rgb(228, 179, 93);
    }

    .btn:hover {
        background-color: rgb(228, 179, 93);
        border-color: rgb(228, 179, 93);
    }
</style>

<body>

    <div th:replace="common/header">

    </div>

    <nav th:replace="common/nav">

    </nav>

    <div class="container mt-5">

        <div class="row">
            <div id="map" style="width:500px; height:400px; margin:0 auto;"></div>
        </div>
        <br>
        <table class="table table-hover">
            <thead>
                <tr>

                    <th>상호명</th>
                    <th>소재지</th>
                    <th>연락처</th>
                    <th>이동</th>


                </tr>
            </thead>
            <tbody>
                <tr>
                    <br>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>




    </div>
    <script type="text/javascript"
        src="//dapi.kakao.com/v2/maps/sdk.js?appkey=개인appkey"></script>

    <script src="https://unpkg.com/"></script>

    <script>



        navigator.geolocation.getCurrentPosition(function (position) {
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;
            createMap(lat, lng);
        });

        function createMap(lat, lng) {
            const container = document.getElementById('map');
            const options = {
                center: new kakao.maps.LatLng(lat, lng),
                level: 9
            }
            map = new kakao.maps.Map(container, options);
            openAPI();
        }

        async function openAPI() {
            const data = await fetch('https://api.odcloud.kr/개인api키');
            const res = await data.json();
            const data_list = res.data;
            let code = '';
            data_list.forEach((v) => {
                code += `<tr><td>${v['상 호']}</td><td>${v['소재지']}</td><td>${v['연락처']}</td><td><button class="btn btn-primary btn-block" onclick = "moveLatLon()">이동</button></td></tr>`


                // kakao.maps.load(function(){

                const geocoder = new kakao.maps.services.Geocoder();
                const address = v.소재지;
                geocoder.addressSearch(address, function (result, status) {
                    if (status === kakao.maps.services.Status.OK) {
                        const coords = new kakao.maps.LatLng(result[0].y, result[0].x);
                        const marker = new kakao.maps.Marker({
                            map: map,
                            position: coords
                        });
                        const infowindow = new kakao.maps.InfoWindow({
                            content: `<div style="width:150px;text-align:center;padding:6px 0;">"${v['상 호']}"</div>`
                        });
                        infowindow.open(map, marker);
                        map.setCenter(coords);
                    }
                });

                // });
            })

            const table = document.querySelector('table tbody tr:last-child');
            table.insertAdjacentHTML("afterend", code);
        }



    </script>

    <script>
        function moveLatLon(lat, lng) {
            map.setLevel(3);
            const moveLatlng = new kakao.maps.LatLng(35.1490440067967, 126.917628214769)
            map.panTo(moveLatlng);
        }
    </script>

    <div th:replace="common/footer">
    </div>

</body>

</html>

 

 

 

where.html

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

</html>
<html lang="en">

<head th:replace="common/head">
</head>
<style>
    @font-face {
        font-family: 'TheJamsil5Bold';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
    }

    body {
        font-family: 'TheJamsil5Bold';
        height: 100vh;
        /* 화면 높이의 100%로 설정 */
        background-color: #000;
        background-size: cover;
        /* 이미지를 화면에 맞게 조절 */
        background-repeat: no-repeat;
        /* 이미지 반복을 중지 */
    }

    .btn {
        background-color: rgb(228, 179, 93);
        border-color: rgb(228, 179, 93);
    }

    .btn:hover {
        background-color: rgb(228, 179, 93);
        border-color: rgb(228, 179, 93);
    }
</style>

<body>

    <div th:replace="common/header">

    </div>

    <nav th:replace="common/nav">

    </nav>

    <div class="container mt-5">
        <form th:action="@{/map/where}" method="get" onsubmit="searchAddress(); return false;">
            <input type="text" id="search" placeholder="검색어 입력">
            <button type="submit" class="btn btn-primary btn-block">검색</button>
            <button onclick="move()" class="btn btn-primary btn-block" id="write-btn">장소 등록창으로 이동</button>
        </form>
        <p class=search id="storeName">장소명:</p>
        <p class=latitude id="latitude">위도:</p>
        <p class=longitude id="longitude">경도:</p>
        <div id="map" style="width:500px; height:400px; margin:0 0;"></div>
    </div>

    <script type="text/javascript"
        src="//dapi.kakao.com/v2/maps/sdk.js?appkey=개인appkey"></script>

    <script>
        let map;
        let storeNameElement;
        let latitudeElement;
        let longitudeElement;
        // 검색어를 이용하여 지도에 마커를 표시하는 함수
        function searchAddress() {
            const search = document.getElementById('search').value; // 검색어 입력란에서 검색어 가져오기
            const container = document.getElementById('map');
            let storeNameElement = document.getElementById('storeName');
            let latitudeElement = document.getElementById('latitude');
            let longitudeElement = document.getElementById('longitude');
            const options = {
                level: 9
            };

            // 카카오 맵 로드 후 지도 생성
            kakao.maps.load(function () {
                const geocoder = new kakao.maps.services.Geocoder();
                geocoder.addressSearch(search, function (result, status) {
                    if (status === kakao.maps.services.Status.OK) {
                        const coords = new kakao.maps.LatLng(result[0].y, result[0].x);
                        const marker = new kakao.maps.Marker({
                            map: map,
                            position: coords
                        });
                        const storeName = search;
                        storeNameElement.textContent = '장소명: ' + storeName;
                        document.getElementById('latitude').textContent = '위도: ' + result[0].y;
                        document.getElementById('longitude').textContent = '경도: ' + result[0].x;
                        const infowindow = new kakao.maps.InfoWindow({
                            content: `<div style="width:150px;text-align:center;padding:6px 0;">"${storeName}"</div>`
                        });
                        infowindow.open(map, marker);
                        map.setCenter(coords);
                    }
                });

            });


        }

        navigator.geolocation.getCurrentPosition(function (position) {
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;
            createMap(lat, lng);
        });

        function createMap(lat, lng) {
            const container = document.getElementById('map');
            const options = {
                center: new kakao.maps.LatLng(lat, lng),
                level: 9
            }
            map = new kakao.maps.Map(container, options);
        }


    </script>
    <script>
        function move() {
            location = '/map';
        }
    </script>
    <div th:replace="common/footer">
    </div>

</body>

</html>