웹으로 카카오 api를 활용하여 버튼을 클릭하면 현재 위치로 가는 방법을 사용했지만,
현재위치가 연결되지 않은 오류가 떴습니다… 물론 크롬으로 했구여, 카카오에서 알려주신 방법 그대로 사용해 보았지만 되지 않네요… 확실한 해결 방법이 있다면 꼭 알려주세여…
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(36.49334, 127.27856), // 지도의 중심좌표
level: 6, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도를 생성한다
var map = new kakao.maps.Map(mapContainer, mapOption);
//------
function locationLoadSuccess(pos){
// 현재 위치 받아오기
var currentPos = new kakao.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
// 지도 이동(기존 위치와 가깝다면 부드럽게 이동)
map.panTo(currentPos);
// 마커 생성
var marker = new kakao.maps.Marker({
position: currentPos
});
// 기존에 마커가 있다면 제거
marker.setMap(null);
marker.setMap(map);
};
function locationLoadError(pos){
alert('위치 정보를 가져오는데 실패했습니다.');
};
// 위치 가져오기 버튼 클릭시
function getCurrentPosBtn(){
navigator.geolocation.getCurrentPosition(locationLoadSuccess,locationLoadError);
};
//-------
// 마커 클러스터러를 생성합니다
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 6 // 클러스터 할 최소 지도 레벨
});
// 지도 타입 변경 컨트롤을 생성한다
var mapTypeControl = new kakao.maps.MapTypeControl();
// 지도의 상단 우측에 지도 타입 변경 컨트롤을 추가한다
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
// 지도에 확대 축소 컨트롤을 생성한다
var zoomControl = new kakao.maps.ZoomControl();
// 지도의 우측에 확대 축소 컨트롤을 추가한다
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
// 다중 마커 생성
var data = [
[36.511513, 127.258927, '<div style="padding:5px;">도램마을 8단지</div>'],
[36.514043, 127.263682, '<div style="padding:5px;">도담 고등학교</div>'],
[36.514494, 127.254835, '<div style="padding:5px;">늘봄 초등학교</div>'],
[36.511590, 127.262530, '<div style="padding:5px;">도담 초등학교</div>']
];
// 마커들을 저장할 변수 생성
var markers = [];
for (var i = 0; i < data.length; i++ ) {
// 지도에 마커를 생성하고 표시한다.
var marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(data[i][0], data[i][1]), // 마커의 좌표
map: map // 마커를 표시할 지도 객체
});
iwPosition = new kakao.maps.LatLng(data[i][0], data[i][1]),
iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
// 인포윈도우를 생성하고 지도에 표시합니다
var infowindow = new kakao.maps.InfoWindow({
//map: map, // 인포윈도우가 표시될 지도
position : iwPosition,
content : data[i][2],
removable : iwRemoveable
});
// 생성된 마커를 마커 저장하는 변수에 넣음
markers.push(marker);
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
}
// 클러스터러에 마커들을 추가합니다
clusterer.addMarkers(markers);
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}