웹 개발
카카오 지도 api 활용 - 다양한 이미지 마커 표시하기
s2h15
2023. 10. 23. 21:05
728x90
카카오 지도 api Sample 에 있는 다양한 이미지 마커 표시하기 가이드를 활용하여 내 h2데이터 베이스와 연결한 후 데이터 베이스에 있는 위도경도로 마커가 생성되게 만들었다.
데이터베이스는 json으로 받아서 활용하였다.
원래 커피숍, 편의점, 주차장 세가지인데 주차장을 음식점으로 바꾸려고 하다 알아보니 여기서 쓴 마커 이미지가 하나의 통일된 이미지에서 가져온것같아서 바꾸지는 못하고 주차장 이름만 음식점으로 변경했다.
json으로 가져오면서 시간이 걸려서 그러는지 이유는 잘 모르겠으나 버튼을 눌렀을때 한번에 마커들이 생성되는것이 아니라 두번쯤 눌러야 생성된다.
참고한 가이드 페이지 :
https://apis.map.kakao.com/web/sample/categoryMarker/
infowindow를 넣어서 정보가 보이고 a태그 등을 넣어 링크 속성도 넣는 것이 다음 목표!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>다양한 이미지 마커 표시하기</title>
<style>
.info-box {
padding: 10px;
margin: 5px;
width: 250px;
height: 150px;
font-size: 12px;
}
.ininfo {
background-color: white;
padding: 10px;
margin: 5px;
width: 250px;
height: 150px;
font-size: 12px;
}
#mapwrap{position:relative;overflow:hidden;}
.category, .category *{margin:0;padding:0;color:#000;}
.category {position:absolute;overflow:hidden;top:10px;left:10px;width:150px;height:50px;z-index:10;border:1px solid black;font-family:'Malgun Gothic','맑은 고딕',sans-serif;font-size:12px;text-align:center;background-color:#fff;}
.category .menu_selected {background:#FF5F4A;color:#fff;border-left:1px solid #915B2F;border-right:1px solid #915B2F;margin:0 -1px;}
.category li{list-style:none;float:left;width:50px;height:45px;padding-top:5px;cursor:pointer;}
.category .ico_comm {display:block;margin:0 auto 2px;width:22px;height:26px;background:url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/category.png') no-repeat;}
.category .ico_coffee {background-position:-10px 0;}
.category .ico_store {background-position:-10px -36px;}
.category .ico_carpark {background-position:-10px -72px;}
</style>
</head>
<body>
<div id="mapwrap">
<!-- 지도가 표시될 div -->
<div id="map" style="width:100%;height:350px;"></div>
<!-- 지도 위에 표시될 마커 카테고리 -->
<div class="category">
<ul>
<li id="coffeeMenu" onclick="changeMarker('coffee')">
<span class="ico_comm ico_coffee"></span>
커피숍
</li>
<li id="storeMenu" onclick="changeMarker('store')">
<span class="ico_comm ico_store"></span>
편의점
</li>
<li id="carparkMenu" onclick="changeMarker('carpark')">
<span class="ico_comm ico_carpark"></span>
음식점
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f6654953f7f2de9be8090793a3c14e09"></script>
<script>
var coffeePositions=[];
var storePositions=[];
var carparkPositions=[];
var infowindow;
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: 4
};
map = new kakao.maps.Map(container, options);
}
function getData(){
fetch('/coffee/data')
.then(response => response.json())
.then(data => {
data.forEach(v => {
const lat = v.latitude;
const lng = v.longitude;
var content = `<div class="info-box"> 상호명: ${v.coffeestore} <br> 주소: ${v.address} <br> </div>`;
coffeePositions.push(new kakao.maps.LatLng(lat,lng)) ;
createCoffeeMarkers(lat,lng,content);
})
})
}
function getData2(){
fetch('/store/data')
.then(response => response.json())
.then(data => {
data.forEach(v => {
const lat = v.latitude;
const lng = v.longitude;
storePositions.push(new kakao.maps.LatLng(lat,lng)) ;
console.log(storePositions);
createStoreMarkers();
})
})
}
function getData3(){
fetch('/restaurant/data')
.then(response => response.json())
.then(data => {
data.forEach(v => {
const lat = v.latitude;
const lng = v.longitude;
carparkPositions.push(new kakao.maps.LatLng(lat,lng)) ;
console.log(carparkPositions);
createCarparkMarkers();
})
})
}
// 커피숍 마커를 생성하고 커피숍 마커 배열에 추가하는 함수입니다
function createCoffeeMarkers(lat,lng,content) {
for (var i = 0; i < coffeePositions.length; i++) {
var imageSize = new kakao.maps.Size(22, 26),
imageOptions = {
spriteOrigin: new kakao.maps.Point(10, 0),
spriteSize: new kakao.maps.Size(36, 98)
};
// 마커이미지와 마커를 생성합니다
var markerImage = createMarkerImage(markerImageSrc, imageSize, imageOptions),
marker = createMarker(coffeePositions[i], markerImage);
// 생성된 마커를 커피숍 마커 배열에 추가합니다
coffeeMarkers.push(marker);
}
}
// 커피숍 마커들의 지도 표시 여부를 설정하는 함수입니다
function setCoffeeMarkers(map) {
for (var i = 0; i < coffeeMarkers.length; i++) {
coffeeMarkers[i].setMap(map);
}
}
var markerImageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/category.png'; // 마커이미지의 주소입니다. 스프라이트 이미지 입니다
coffeeMarkers = [], // 커피숍 마커 객체를 가지고 있을 배열입니다
storeMarkers = [], // 편의점 마커 객체를 가지고 있을 배열입니다
carparkMarkers = []; // 주차장 마커 객체를 가지고 있을 배열입니다
setCoffeeMarkers();
changeMarker('coffee'); // 지도에 커피숍 마커가 보이도록 설정합니다
// 마커이미지의 주소와, 크기, 옵션으로 마커 이미지를 생성하여 리턴하는 함수입니다
function createMarkerImage(src, size, options) {
var markerImage = new kakao.maps.MarkerImage(src, size, options);
return markerImage;
}
// 좌표와 마커이미지를 받아 마커를 생성하여 리턴하는 함수입니다
function createMarker(position, image) {
var marker = new kakao.maps.Marker({
position: position,
image: image
});
return marker;
}
// 편의점 마커를 생성하고 편의점 마커 배열에 추가하는 함수입니다
function createStoreMarkers() {
for (var i = 0; i < storePositions.length; i++) {
var imageSize = new kakao.maps.Size(22, 26),
imageOptions = {
spriteOrigin: new kakao.maps.Point(10, 36),
spriteSize: new kakao.maps.Size(36, 98)
};
// 마커이미지와 마커를 생성합니다
var markerImage = createMarkerImage(markerImageSrc, imageSize, imageOptions),
marker = createMarker(storePositions[i], markerImage);
// 생성된 마커를 편의점 마커 배열에 추가합니다
storeMarkers.push(marker);
}
}
// 편의점 마커들의 지도 표시 여부를 설정하는 함수입니다
function setStoreMarkers(map) {
for (var i = 0; i < storeMarkers.length; i++) {
storeMarkers[i].setMap(map);
}
}
// 주차장 마커를 생성하고 주차장 마커 배열에 추가하는 함수입니다
function createCarparkMarkers() {
for (var i = 0; i < carparkPositions.length; i++) {
var imageSize = new kakao.maps.Size(22, 26),
imageOptions = {
spriteOrigin: new kakao.maps.Point(10, 72),
spriteSize: new kakao.maps.Size(36, 98)
};
// 마커이미지와 마커를 생성합니다
var markerImage = createMarkerImage(markerImageSrc, imageSize, imageOptions),
marker = createMarker(carparkPositions[i], markerImage);
// 생성된 마커를 주차장 마커 배열에 추가합니다
carparkMarkers.push(marker);
}
}
// 주차장 마커들의 지도 표시 여부를 설정하는 함수입니다
function setCarparkMarkers(map) {
for (var i = 0; i < carparkMarkers.length; i++) {
carparkMarkers[i].setMap(map);
}
}
// 카테고리를 클릭했을 때 type에 따라 카테고리의 스타일과 지도에 표시되는 마커를 변경합니다
function changeMarker(type){
var coffeeMenu = document.getElementById('coffeeMenu');
var storeMenu = document.getElementById('storeMenu');
var carparkMenu = document.getElementById('carparkMenu');
// 커피숍 카테고리가 클릭됐을 때
if (type === 'coffee') {
getData();
// 커피숍 카테고리를 선택된 스타일로 변경하고
coffeeMenu.className = 'menu_selected';
// 편의점과 주차장 카테고리는 선택되지 않은 스타일로 바꿉니다
storeMenu.className = '';
carparkMenu.className = '';
// 커피숍 마커들만 지도에 표시하도록 설정합니다
setCoffeeMarkers(map);
setStoreMarkers(null);
setCarparkMarkers(null);
} else if (type === 'store') { // 편의점 카테고리가 클릭됐을 때
getData2();
// 편의점 카테고리를 선택된 스타일로 변경하고
coffeeMenu.className = '';
storeMenu.className = 'menu_selected';
carparkMenu.className = '';
// 편의점 마커들만 지도에 표시하도록 설정합니다
setCoffeeMarkers(null);
setStoreMarkers(map);
setCarparkMarkers(null);
} else if (type === 'carpark') { // 주차장 카테고리가 클릭됐을 때
getData3();
// 주차장 카테고리를 선택된 스타일로 변경하고
coffeeMenu.className = '';
storeMenu.className = '';
carparkMenu.className = 'menu_selected';
// 주차장 마커들만 지도에 표시하도록 설정합니다
setCoffeeMarkers(null);
setStoreMarkers(null);
setCarparkMarkers(map);
}
}
</script>
</body>
</html>728x90