https://apis.map.kakao.com/web/sample/addMarkerClickEvent/
이 예제에서
마커마다 클릭이벤트로 인포윈도우를 설정하고 싶은데
감이안잡히네요 하나는 설정할수 있을것 같은데…
그리고 미리저장해놓은 주소나 메모등을 넣으면 바로코딩되게 하고싶은데
이건 어떤 언어를 써야하나요…?
여러 개의 마커와 인포윈도우를 먼저 표출한 다음 응용해서 구현해주세요.
https://apis.map.kakao.com/web/sample/multipleMarkerEvent/
https://devtalk.kakao.com/t/html/99548/2
값을 넣으면 원하는 방향으로 동작을 하는 함수를 구현해주세요.
그리고 데이터를 불러올 때, 값을 입력할 때 해당 함수를 호출하면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>여러개 마커에 이벤트 등록하기1</title>
<style>
#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="map" style="width:100%;height:350px;"></div>
<div class="category">
<ul>
<li id="coffeeMenu" onclick="changeMarker('coffee')">
<span class="ico_comm ico_coffee"></span>
test1
</li>
<li id="storeMenu" onclick="changeMarker('store')">
<span class="ico_comm ico_store"></span>
test2
</li>
<li id="carparkMenu" onclick="changeMarker('carpark')">
<span class="ico_comm ico_carpark"></span>
test3
</li>
</ul>
</div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=5bb02be7b2b653b5702544712e98a5aa"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(35.92435333106166, 128.5988943402638), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다
var coffeePositions = [
[35.92435333106166, 128.5988943402638, '주식회사범우'],
[35.92140484512273, 128.59888105214984, '롯데리아'],
[35.92091980480407, 128.59880495953917, '카페봄봄'],
[35.92368529012872, 128.59757775114582, '리치모아']
];
var infowindow = new kakao.maps.InfoWindow();
for(var i=0; i<coffeePositions.length; i++) {
var data = coffeePositions[i];
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(data[0], data[1]),
map: map
});
marker.title = data[2];
kakao.maps.event.addListener(marker, 'click', function(mouseEvent) {
infowindow.setContent('<div>'+this.title+'</div>');
infowindow.setPosition(this.getPosition());
infowindow.open(map, this);
});
}
var markerImageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/category.png'; // 마커이미지의 주소입니다. 스프라이트 이미지 입니다
coffeeMarkers = [], // 커피숍 마커 객체를 가지고 있을 배열입니다
storeMarkers = [], // 편의점 마커 객체를 가지고 있을 배열입니다
carparkMarkers = []; // 주차장 마커 객체를 가지고 있을 배열입니다
createCoffeeMarkers(); // 커피숍 마커를 생성하고 커피숍 마커 배열에 추가합니다
createStoreMarkers(); // 편의점 마커를 생성하고 편의점 마커 배열에 추가합니다
createCarparkMarkers(); // 주차장 마커를 생성하고 주차장 마커 배열에 추가합니다
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 createCoffeeMarkers() {
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);
}
}
// 편의점 마커를 생성하고 편의점 마커 배열에 추가하는 함수입니다
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') {
// 커피숍 카테고리를 선택된 스타일로 변경하고
coffeeMenu.className = 'menu_selected';
// 편의점과 주차장 카테고리는 선택되지 않은 스타일로 바꿉니다
storeMenu.className = '';
carparkMenu.className = '';
// 커피숍 마커들만 지도에 표시하도록 설정합니다
setCoffeeMarkers(map);
setStoreMarkers(null);
setCarparkMarkers(null);
} else if (type === 'store') { // 편의점 카테고리가 클릭됐을 때
// 편의점 카테고리를 선택된 스타일로 변경하고
coffeeMenu.className = '';
storeMenu.className = 'menu_selected';
carparkMenu.className = '';
// 편의점 마커들만 지도에 표시하도록 설정합니다
setCoffeeMarkers(null);
setStoreMarkers(map);
setCarparkMarkers(null);
} else if (type === 'carpark') { // 주차장 카테고리가 클릭됐을 때
// 주차장 카테고리를 선택된 스타일로 변경하고
coffeeMenu.className = '';
storeMenu.className = '';
carparkMenu.className = 'menu_selected';
// 주차장 마커들만 지도에 표시하도록 설정합니다
setCoffeeMarkers(null);
setStoreMarkers(null);
setCarparkMarkers(map);
}
}
</script>
</body>
</html>
답변감사합니다 여러마커를 찍고 인포윈도우 까진 출력해보았고
다양한 이미지 마커로 카테고리로 묶어보고 싶어
카테고리 선택 이미지까진 추가해보았는데 그다음을 잘 모르겠네요…
https://apis.map.kakao.com/web/sample/categoryMarker/
완전 초보라 어떻게 넣어야 할지 모르겠네요 ㅠ
구현하시려는 기능과 가장 유사한 예제의 코드를 기본으로 하고
거기에 다른예제를 참고하여 기능을 붙이면서 발전시키면 됩니다.
저희가 질문자 분께서 어디까지 알고 계시는지 잘 모르는 상황이며
질문을 봤을때 어떤 문제로 어려움을 겪고 계시는지 자세히 모르겠습니다.
온전히 동작하는 프로그램을 원하시는 것이라면
운영정책상 구현된 코드 자체를 제공해 드리지는 않는다는 점 확인해 주시고 양해 부탁드리겠습니다.
감사합니다 더 공부해서 해결해보도록 하겠습니다!