기록해! 정리해!

카카오 API 지도 (2) - 데이터 연동 본문

Spring

카카오 API 지도 (2) - 데이터 연동

zsuling 2022. 9. 21. 17:18
여러개의 마크 위에 큰지도와 길찾기 추가
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>여러개 마커 제어하기</title>
    
</head>
<body>
<div id="map" style="width:100%;height:750px;"></div>
<p>
    <button onclick="hideMarkers()">마커 감추기</button>
    <button onclick="showMarkers()">마커 보이기</button>
</p> 
<em>클릭한 위치에 마커가 표시됩니다!</em>
    
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c39b34335d1908a9d9a85d1262e4151b"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
    mapOption = { 
        center: new kakao.maps.LatLng(33.379855775783184, 126.52691599216999), // 지도의 중심좌표
        level: 9 // 지도의 확대 레벨
    };

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

// 지도에 표시된 마커 객체를 가지고 있을 배열입니다
var markers = [];

// 마커 하나를 지도위에 표시합니다 

var title = ['섭지코지','성산일출봉','비양도','서귀포시','차귀도', '한라한']           
var lat = [33.43110070088868, 33.467529585445796,  33.40008575665509, 33.258222769268535 ,  33.31178531314658, 33.379855775783184] 
var lon = [126.92781417796924, 126.93462584853633, 126.26375498609065, 126.51632575761015, 126.16965945165987, 126.52691599216999]

for (i=0 ; i <= 5 ; i++ ){
  addMarker(new kakao.maps.LatLng(lat[i], lon[i]));
  
//인포윈도우를 생성하고 지도에 표시합니다
	var iwContent = ' <div style="padding:5px;"> '+ title[i] +' <br> ' 
		iwContent =iwContent + ' <a href=https://map.kakao.com/link/map/'+ title[i] +','+lat[i]+','+ lon[i] + ' style="color:blue" target="_blank">큰지도보기</a> '
		iwContent =iwContent + ' <a href=https://map.kakao.com/link/to/'+ title[i] +','+lat[i]+','+ lon[i] + ' style="color:blue" target="_blank">길찾기</a></div>'
   
var infowindow = new kakao.maps.InfoWindow({

      map: map, 
      position : new kakao.maps.LatLng(lat[i]+0.02, lon[i]+0.01), 
      content : iwContent,
      removable : true
  });
  
}

// 마커를 생성하고 지도위에 표시하는 함수입니다
function addMarker(position) {
    
    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({
        position: position

    });

    // 마커가 지도 위에 표시되도록 설정합니다
    marker.setMap(map);
    
    // 생성된 마커를 배열에 추가합니다
    markers.push(marker);
}

// 배열에 추가된 마커들을 지도에 표시하거나 삭제하는 함수입니다
function setMarkers(map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
    }            
}

// "마커 보이기" 버튼을 클릭하면 호출되어 배열에 추가된 마커를 지도에 표시하는 함수입니다
function showMarkers() {
    setMarkers(map)    
}

// "마커 감추기" 버튼을 클릭하면 호출되어 배열에 추가된 마커를 지도에서 삭제하는 함수입니다
function hideMarkers() {
    setMarkers(null);    
}
</script>

</body>
</html>

-> 링크가 걸려져있음

큰지도보기)

길찾기)

 

 

처음에는 여러개의 마크만 출력하고 마우스 올리면 인포정보 보이기

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ include file="../include/top2.jsp" %>

<section>
<div align="center">
<br>	
	<div id="map" style="width:95%;height:650px;"></div>
	
	<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=${key}"></script>
	<script>
	var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
	    mapOption = { 
	        center: new kakao.maps.LatLng(35.2382905, 128.692398), // 지도의 중심좌표
	        level: 9 // 지도의 확대 레벨  35.2382905 128.692398 (경남도청)
	    };
	
	var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
	
	var  title = new Array();
	var  lat = new Array();
	var  lon = new Array();
	var  rdnmadr = new Array();
	
	<c:forEach var="k"  items="${li}">
       title.push("${k.entrprsNm }")
       lat.push("${k.latitude}")
       lon.push("${k.logitude}")
       rdnmadr.push("${k.rdnmadr}")
    </c:forEach>
     
   		
	// 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다
	
	var positions = [];
	
	for (i=0 ; i <= title.length ; i++ ){
		positions[i] = {
				content : ' <div style="padding:5px;"> '+ title[i] +' <br> ' 
						+ '  '  + rdnmadr[i] + '<br>'
						+ ' <a href=https://map.kakao.com/link/to/'+ title[i] +','+lat[i]+','+ lon[i] + ' style="color:blue" target="_blank">길찾기</a></div>',
				latlng : new kakao.maps.LatLng(lat[i], lon[i])
		};
	}
	
	for (var i = 0; i < positions.length; i ++) {
	    // 마커를 생성합니다
	    var marker = new kakao.maps.Marker({
	        map: map, // 마커를 표시할 지도
	        position: positions[i].latlng // 마커의 위치
	    });
	
	    // 마커에 표시할 인포윈도우를 생성합니다 
	    var infowindow = new kakao.maps.InfoWindow({
	        content: positions[i].content // 인포윈도우에 표시할 내용
	    });
	
	    // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
	    // 이벤트 리스너로는 클로저를 만들어 등록합니다 
	    // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
	    kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
	    // kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
	}
	
	// 인포윈도우를 표시하는 클로저를 만드는 함수입니다 
	function makeOverListener(map, marker, infowindow) {
	    return function() {
	        infowindow.open(map, marker);
	    };
	}
	
	// 인포윈도우를 닫는 클로저를 만드는 함수입니다 
	function makeOutListener(infowindow) {
	    return function() {
	        infowindow.close();
	    };
	}
	</script>
</div>

</div>

<br>
</section>
<%@ include file="../include/bottom.jsp" %>

테이블 연동하기

package com.springbook.biz.kakao;

import lombok.Data;

@Data
public class KakaoVo {
   private  String title;
   private  double  lat;
   private  double  lon;
}
=====================================================

​

package com.springbook.view;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.springbook.biz.kakao.KakaoVo;

@Controller
public class MapController {
	
	@RequestMapping(value="mapSample1.do")
	public String selectTop15( Model  model ) {
				
		model.addAttribute("m1",37.48445671);
		model.addAttribute("m2",126.93003738);
		
		return "kakao/mapSample1.jsp";		
	}
	
	@RequestMapping(value="mapSample8.do")
	public String mapSample8( Model  model ) {
		
	   // 제주기준 좌표 찍기  
		
	   double	k1 = 33.379855775783184;
	   double   k2 = 126.1 ;
	   List<KakaoVo>	li = new ArrayList<KakaoVo>();
	   
		for(int i=0 ; i < 5 ; i++ ) {
			
			KakaoVo v = new KakaoVo();
			v.setTitle("지도" +(i+1));
			v.setLat(k1 + i * 0.03 );
			v.setLon(k2 + i * 0.2);
			
			li.add(v);
			
		}
		
		model.addAttribute("li",li);
		model.addAttribute("key","2fb9031d27e12ecf3383c962c58416cd");
		
		return "kakao/mapSample8.jsp";		
	}
	
	
}
package com.springbook.view;

import java.util.ArrayList;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.springbook.biz.company.CompanyService;
import com.springbook.biz.kakao.KakaoVo;

@Controller
public class MapController {
	
	@Autowired  
	private CompanyService  service;
	
	
	@RequestMapping(value="mapSample1.do")
	public String selectTop15( Model  model ) {
				
		model.addAttribute("m1",37.48445671);
		model.addAttribute("m2",126.93003738);
		
		return "kakao/mapSample1.jsp";		
	}
	
	@RequestMapping(value="mapSample8.do")
	public String mapSample8( Model  model ) {
		
	   // 제주기준 좌표 찍기  
	   /*	
	   double	k1 = 33.379855775783184;
	   double   k2 = 126.1 ;
	   List<KakaoVo>	li = new ArrayList<KakaoVo>();
	   
		for(int i=0 ; i < 5 ; i++ ) {
			
			KakaoVo v = new KakaoVo();
			v.setTitle("지도" +(i+1));
			v.setLat(k1 + i * 0.03 );
			v.setLon(k2 + i * 0.2);
			
			li.add(v);
			
		}
		
		model.addAttribute("li",li);
		
		*/
		
		model.addAttribute("key","2fb9031d27e12ecf3383c962c58416cd");		
		model.addAttribute("li",service.select());
		
		return "kakao/mapSample8.jsp";		
	}	
	
}

저작자표시 비영리 변경금지

'Spring' 카테고리의 다른 글

비즈니스 컴포넌트 실습 II ( 어노테이션으로 수정 )  (0) 2022.09.22
비즈니스 컴포넌트 실습 II  (0) 2022.09.22
비즈니스 컴포넌트 실습 I (복습) - Board  (1) 2022.09.21
비즈니스 컴포넌트 실습 I (복습) - 데이터베이스 드라이버 , JDBCUtil, applicationContext.xml  (1) 2022.09.21
비즈니스 컴포넌트 실습 I (복습) - VO 만들기  (1) 2022.09.21
'Spring' Related Articles more
Comments