2026, 새로운 도약을 시작합니다.
SIR
목록으로
이전글 다음글

kakao map api 좌표 자동으로 어떻게 구해요? 채택완료

0620lhj
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전 조회 1,993
답변 1
목록

board 에서 view 질문이에요

kakao map api 좌표를 자동으로 enter: new kakao.maps.LatLng(33.451475, 126.570528),  어떻게 구해요?

 “부산광역시 강서구 명지국제12로15 1층” 이것뿐인데 이곳을 가지고 자동으로 어떻게  좌표를 xy로 어떻게 구하는 건가요? 

XY 값을 따로 받지 않고 자동으로 연동할 수 있게 하려고요 도와주세ㅠㅠ

Copy 




    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 = '' +
        '    ' +
        '        ' +
        '            카카오 스페이스닷원' +
        '            ' +
        '        ' +
        '        ' +
        '            ' +
        '                ' +
        '           ' +
        '            ' +
        '                ' +
        '                전화번호 : ' +
        '            ' +
        '        ' +
        '    ' +
        '';

    // 마커 위에 커스텀오버레이를 표시합니다
    // 마커를 중심으로 커스텀 오버레이를 표시하기위해 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);
    }

에서 이 부분 ? 

center: new kakao.maps.LatLng(33.451475, 126.570528), // 지도의 중심좌표

자동으로 가능한가요?

자동 가능하면 최종으로 어떻게 하면 되나요 알려 주세요 ^^

꼭 부탁드립니다 ^^

#map

답변 1개

채택된 답변
+20 포인트

아래의 내용을 한번 참고해 보시겠어요?

<!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>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고