다음 지도 다중 마킹 관련하여 질문드립니다.
본문
1번 소스 - 지도표시 소스
<!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
</p><div id="????" class="root_daum_roughmap root_daum_roughmap_landing" style="width:100%"></div>
<!--
2. 설치 스크립트
* 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.
-->
<script charset="UTF-8" class="daum_roughmap_loader_script" src="???"></script>
<!-- 3. 실행 스크립트 -->
<script charset="UTF-8">
new daum.roughmap.Lander({
"timestamp" : "???",
"key" : "???",
"mapHeight" : "360"
}).render();
</script>
현재 이렇게 해서 지도가 잘 표현이 되고 있습니다.
그런데 건물 주차장이 좀 떨어져 있어서 마킹을 하고 동시에 지도에 표시하고 싶은데요.
구글에서 검색해서 나온 다중 마킹 스크립트 예제로 해봤는데도 잘안되네요.
2번 소스 - 다중마킹 소스
<html>
<head>
<meta charset="utf-8">
<title>여러개 마커 표시하기</title>
</head>
<body>
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커를 표시할 위치와 title 객체 배열입니다
var positions = [
{
title: '카카오',
latlng: new kakao.maps.LatLng(33.450705, 126.570677)
},
{
title: '생태연못',
latlng: new kakao.maps.LatLng(33.450936, 126.569477)
},
{
title: '텃밭',
latlng: new kakao.maps.LatLng(33.450879, 126.569940)
},
{
title: '근린공원',
latlng: new kakao.maps.LatLng(33.451393, 126.570738)
}
];
// 마커 이미지의 이미지 주소입니다
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
for (var i = 0; i < positions.length; i ++) {
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image : markerImage // 마커 이미지
});
}
</script>
</body>
</html>
1번 소스의 폼을 유지하면서 2번처럼 마킹만 하는 방법이 없을까요?
아 그리고 마킹 이미지는 별표 말고 기존 마커와 똑같은 것이었으면 좋겠습니다.
이것만 해결하면 정말로 끝이네요.
오늘 하루종일 해봤는데도 안되네요 ㅜㅜ
질문과 답변으로 해결이 가능하니까 계속 질문하게 되네요.
고수님들 감사합니다.
ps. 스킨 혹은 php 안쓰고 스크립트로 해결하고 싶습니다.
답변 2
정적인손님 말씀처럼 1번은 다중마커 지원이 되지 않습니다.
지도API를 활용하셔서 코딩을 하셔야 합니다. 직접 코딩이 어려우시면 공개스킨 및 컨텐츠몰에서 유료 구매 하신후 적용 하셔야 할것 같네요~
그누보드 - 그누보드5 스킨 1 페이지 (sir.kr)
공개스킨도 많으니 참고하시면 도움이 될것 같습니다
1번 소스는 지도에서 지도퍼가기 소스이고...
2번 소스는 지도API로 코딩해서 지도만드는 소스라...
지도퍼가기소스는 단일마커만 지원되는거로 알고있어요.
마커 2개이상 찍으시려면 API 키 받아서 2번소스로 적용하셔야할듯 허네요.
