내 위치 직접선택 기능, 최대 검색 거리, 네이버 검색 기능

먼저 geolocation 을 통해 받아온 위치가 정확하지 않았을 때가 많았다. 그래서

 

1. '내 위치 가져오기' 기능 실행시 드래그를 통해 정확한 위치 설정 가능하도록 지정

2. 그래도 석연치 않을 때는 '내 위치 직접선택' 기능 이용

 

먼저 드래그를 통해 정확한 위치를 설정 가능하도록 해야 한다.

 

var infowindow = new kakao.maps.InfoWindow({
        content: '<div style="width:150px;text-align:center;padding:6px 0;">' +
            '위치가 부정확하다면 드래그를 통해 정확한 위치로 옮겨주세요!</div>'
    });
    infowindow.open(map, marker);

    // 기존에 마커가 있다면 제거
    marker.setMap(null);
    marker.setMap(map);

    // 마우스를 마커에 올릴 시 인포윈도우 삭제
    kakao.maps.event.addListener(marker, 'mouseover', function() {
        infowindow.close();
    });

    // 마커의 드래그가 끝나면 현재 위치 갱신
    kakao.maps.event.addListener(marker, 'dragend', function() {
        currentPos = marker.getPosition();
    });

 

locationLoadSuccess 함수에 이런 코드를 추가했다. 인포윈도우를 통해 사용자에게 가져온 위치가 불확실할 경우 직접 드래그하여 옮길 수 있도록 지정한 것이다. 카카오맵 api에 드래그 가능한 마커 기능이 있어서 정말 다행이다.

 

 

적용시 이런 모습. 실제로 마커를 옮기는 작업이 끝나면 currentPos 값이 마커의 위치로 갱신된다.

 

 

또한 직접선택 버튼을 추가했다. 브라우저 호환의 문제나 다른 이유로 내 위치를 가져오는데 실패하면 직접선택이 가능하도록 구현한다.

 

function getCurrentPosByPickBtn(){
    var userInput = prompt('대략적인 위치를 입력해주세요!(서울시 강남구 삼성동)');

    // 주소 - 좌표 변환 객체 생성
    var geocoder = new kakao.maps.services.Geocoder();

    // 주소로 좌표를 검색합니다
    geocoder.addressSearch(userInput, 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,
                draggable: true
            });

            // 현재 위치 갱신
            currentPos = coords;

            // 인포윈도우로 장소에 대한 설명을 표시합니다
            var infowindow = new kakao.maps.InfoWindow({
                content: '<div style="width:150px;text-align:center;padding:6px 0;">' +
                    '드래그를 통해 정확한 위치로 옮겨주세요!</div>'
            });
            infowindow.open(map, marker);
            
            
            // 마우스를 마커에 올릴 시 인포윈도우 삭제
            kakao.maps.event.addListener(marker, 'mouseover', function() {
                infowindow.close();
            });

            // 마커의 드래그가 끝나면 현재 위치 갱신
            kakao.maps.event.addListener(marker, 'dragend', function() {
                currentPos = marker.getPosition();
            });


            // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
            map.setCenter(coords);
        }
    });
}

 

이런식으로 confirm 창을 통해 대략적인 위치를 얻게 된다. 그러면 그 장소에 마커가 찍히게 되고, 정확한 위치는 아까처럼 드래그를 통해 지정해주면 된다.

 

 

이제 최대 검색 거리 지정 기능을 추가한다. 디자인은 일단 차치하고.. 라디오버튼 이용해준다. 옵션은 500m, 1000m, 2000m

 

 

구현은 어렵지 않다. 그냥 keywordSearch함수에서 distance 변수를 만들어서 radiobutton의 value를 가져온 뒤, 검색 옵션 객체의 radius 값에 넣어주면 된다. 끝~

 

이제 검색 결과 리스트에서, 업체명 클릭시 해당 업체명으로 네이버에 검색한 결과로 이어줄 것이다.

 

먼저 네이버에서 검색하면 어떤 url 을 쓰는지 살펴본다.

 

 

보이는 것처럼 검색 시

 

search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=검색어

 

형태를 띄고 있고 '검색어' 부분은 띄어쓰기가 +로 구분되어 있다.

 

 

이렇게 a 태그를 통해 링크를 걸어준다. 새탭에서 열리길 원하고, 타이틀(마우스를 올리면 보이는 설명)은 '클릭시 네이버 검색' 으로 지정해 주었다.

 

    function naverSearch(placeName){
        // 검색어를 띄어쓰기 기준으로 분할
        var nameArr = placeName.split(' ');
        // 띄어쓰기 사이에 +넣어서 join
        var joinedArr = nameArr.join('+');

        // 네이버 검색
        return 'https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=' + joinedArr;
    }

 

naverSearch 함수는 placeName을 인자로 받아서 공백 기준으로 분할 후 +를 넣어서 join 한 뒤에 아까 본 검색 주소에 뒤에 붙여주면 된다.

 

성공적으로 적용되었다!

 

그나저나 디자인은 언제 고칠까... 막막하다.