kakao map api 좌표 자동으로 어떻게 구해요?
본문
board 에서 view 질문이에요
kakao map api 좌표를 자동으로 enter: new kakao.maps.LatLng(33.451475, 126.570528), 어떻게 구해요?
“부산광역시 강서구 명지국제12로15 1층” 이것뿐인데 이곳을 가지고 자동으로 어떻게 좌표를 xy로 어떻게 구하는 건가요?
XY 값을 따로 받지 않고 자동으로 연동할 수 있게 하려고요 도와주세ㅠㅠ
<script>
var mapContainer = document.getElementById('map'), // 지도의 중심좌표
mapOption = {
center: new kakao.maps.LatLng(33.451475, 126.570528), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 지도에 마커를 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(33.450701, 126.570667)
});
// 커스텀 오버레이에 표시할 컨텐츠 입니다
// 커스텀 오버레이는 아래와 같이 사용자가 자유롭게 컨텐츠를 구성하고 이벤트를 제어할 수 있기 때문에
// 별도의 이벤트 메소드를 제공하지 않습니다
var content = '<div class="wrap" style="padding-bottom: 100px;">' +
' <div class="info">' +
' <div class="title">' +
' 카카오 스페이스닷원' +
' <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/thumnail.png" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis"><?php echo $view['wr_1']?></div>' +
' <div class="jibun ellipsis">전화번호 : <?php echo $view['wr_2']?></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
// 마커 위에 커스텀오버레이를 표시합니다
// 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
var overlay = new kakao.maps.CustomOverlay({
content: content,
map: map,
position: marker.getPosition()
});
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
kakao.maps.event.addListener(marker, 'click', function() {
overlay.setMap(map);
});
// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
function closeOverlay() {
overlay.setMap(null);
}
</script>
에서 이 부분 ?
center: new kakao.maps.LatLng(33.451475, 126.570528), // 지도의 중심좌표
자동으로 가능한가요?
자동 가능하면 최종으로 어떻게 하면 되나요 알려 주세요 ^^
꼭 부탁드립니다 ^^
답변 1
아래의 내용을 한번 참고해 보시겠어요?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>지도에 마커 표시하기</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=YOUR_APP_KEY"></script>
</head>
<body>
<div id="map" style="width:100%;height:350px;"></div>
<script>
// 주소 변수 설정
var address = "부산광역시 강서구 명지국제12로15 1층";
// 카카오 지도 API 로드
var mapContainer = document.getElementById('map'),
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체 생성
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색
geocoder.addressSearch(address, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
// 인포윈도우로 장소에 대한 설명을 표시
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">여기입니다!</div>'
});
infowindow.open(map, marker);
// 지도의 중심을 결과값으로 받은 위치로 이동
map.setCenter(coords);
}
});
</script>
</body>
</html>
