17 TIL 정리 (로드뷰,onkeyup)

카카오 지도API-로드뷰,커스텀 오버레이

일단 지도 생성부터 주소로부터 좌표 값을 구하는 것 같다.

var geocoder = new kakao.maps.services.Geocoder();

geocoder를 이용해 좌표 변환 객체

이후 추가할 오버레이를 만든다

var content = '<div class="overlay_info">';
            content += '    <a><strong>여기서 만나요!</strong></a>';
            content += '    <div class="desc">';
            content += '        <img src="/static/info_image.png" style="object-fit: fill" >';
            content += '        <span class="address">{{ post.address }}</span>';
            content += '    </div>';
            content += '</div>';

이후 주소에서 좌표값을 계산한 후 커스텀 오버레이를 좌표 상에 띄울 수 있게 만든다.

geocoder.addressSearch(local, function (result, status) {
                    if (status === kakao.maps.services.Status.OK) {
                        // 커스텀 오버레이가 표시될 위치입니다
                        var position = new kakao.maps.LatLng(result[0].y, result[0].x);

                        // 커스텀 오버레이를 생성합니다
                        var mapCustomOverlay = new kakao.maps.CustomOverlay({
                            position: position,
                            content: content,
                            xAnchor: 0.5, // 커스텀 오버레이의 x축 위치입니다. 1에 가까울수록 왼쪽에 위치합니다. 기본값은 0.5 입니다
                            yAnchor: 1.1 // 커스텀 오버레이의 y축 위치입니다. 1에 가까울수록 위쪽에 위치합니다. 기본값은 0.5 입니다
                        });

                        // 커스텀 오버레이를 지도에 표시합니다
                        mapCustomOverlay.setMap(map);

                        map.setCenter(position); //좌표를 중앙 시점으로

이후 로드뷰를 같이 띄우려면 이미 지도가 띄워져 있고 좌표값을 구했기에 오버레이가 띄워져 있는 위치에 바로 좌표값을 받아 로드뷰를 띄워주면 해결된다.

var rvContainer = document.getElementById('roadview'); //로드뷰를 표시할 div
                        var rv = new kakao.maps.Roadview(rvContainer); //로드뷰 객체
                        var rvClient = new kakao.maps.RoadviewClient(); //좌표로부터 로드뷰 파노ID를 가져올 로드뷰 helper객체

                        //지도의 오버레이좌표와 가까운 로드뷰의 panoId를 추출하여 로드뷰를 띄운다.
                        rvClient.getNearestPanoId(position, 50, function (panoId) {
                            rv.setPanoId(panoId, position); //panoId와 오버레이좌표를 통해 로드뷰 실행
                        });

                        kakao.maps.event.addListener(rv, 'init', function () {

                        });

그러면 전체적인 값이

        function map() {
            var local = `{{ post.address }}`
            var mapContainer = document.getElementById('map'), // 지도를 표시할 div
                mapCenter = new kakao.maps.LatLng(33.5563, 126.7958), // 지도의 중심좌표
                mapOption = {
                    center: mapCenter, // 지도의 중심좌표
                    level: 3 // 지도의 확대 레벨
                };

            var map = new kakao.maps.Map(mapContainer, mapOption);

            var geocoder = new kakao.maps.services.Geocoder(); //좌표를 계산할 객체

            // 커스텀 오버레이에 표시할 내용입니다
            // HTML 문자열 또는 Dom Element 입니다
            var content = '<div class="overlay_info">';
            content += '    <a><strong>여기서 만나요!</strong></a>';
            content += '    <div class="desc">';
            content += '        <img src="/static/info_image.png" style="object-fit: fill" >';
            content += '        <span class="address">{{ post.address }}</span>';
            content += '    </div>';
            content += '</div>';

            geocoder.addressSearch(local, function (result, status) {
                    if (status === kakao.maps.services.Status.OK) {
                        // 커스텀 오버레이가 표시될 위치입니다
                        var position = new kakao.maps.LatLng(result[0].y, result[0].x);

                        // 커스텀 오버레이를 생성합니다
                        var mapCustomOverlay = new kakao.maps.CustomOverlay({
                            position: position,
                            content: content,
                            xAnchor: 0.5, // 커스텀 오버레이의 x축 위치입니다. 1에 가까울수록 왼쪽에 위치합니다. 기본값은 0.5 입니다
                            yAnchor: 1.1 // 커스텀 오버레이의 y축 위치입니다. 1에 가까울수록 위쪽에 위치합니다. 기본값은 0.5 입니다
                        });

                        // 커스텀 오버레이를 지도에 표시합니다
                        mapCustomOverlay.setMap(map);

                        map.setCenter(position);

                        var rvContainer = document.getElementById('roadview'); //로드뷰를 표시할 div
                        var rv = new kakao.maps.Roadview(rvContainer); //로드뷰 객체
                        var rvClient = new kakao.maps.RoadviewClient(); //좌표로부터 로드뷰 파노ID를 가져올 로드뷰 helper객체

                        //지도의 오버레이좌표와 가까운 로드뷰의 panoId를 추출하여 로드뷰를 띄운다.
                        rvClient.getNearestPanoId(position, 50, function (panoId) {
                            rv.setPanoId(panoId, position); //panoId와 오버레이좌표를 통해 로드뷰 실행
                        });

                        kakao.maps.event.addListener(rv, 'init', function () {

                        });
                    }
                }
            )

        }

이 전체 함수를 도큐먼트 레디 때 붙여 넣고 body안에 map을 만들 div를 생성하면 완료!

---

엔터를 누를시 실행

먼저 자바스크립트로 실행한다면 함수로 이용해보자 (엔터키가 keyCode 13 이다)

<body>
<input onkeyup="enterkey();" type="text"  value="" />
</body>
<script>
function enterkey() {
        if (window.event.keyCode == 13) {
             // 엔터키가 눌렸을 때 실행할 내용
             login();
        }
}
</script>

jQuery로 실행한다면

$("#SEARCH").keyup(function(e){if(e.keyCode == 13)  login(); });

이걸 바로 input박스에도 붙일 수 있다.

<input type="text" "onkeyup="if(window.event.keyCode==13){searching()}">