카카오 지도 api 활용 - 현재 위치 기준 반경 데이터만 마커 생성2

지난번에는 반경을 직접 코드로 지정해주고 특정 반경 안의 마커만 생성되게 하는 기능을 구현했다.

카테고리에 따라 마커가 생성되는 기능도 같이 넣어준 지도라서 다른 카테고리를 선택했을때에도 반경 안 마커가 그대로 남아있는 것이 문제였다.

따라서 반경을 사용자가 지정할 수 있고, 지정한 반경 안의 마커가 보이기와 숨기기를 통해 생성 제거 될 수 있도록 구현했다.

 

<div class ="distancebox" style="text-align: center; padding: 5px;background-color: white;">
                반경 <input type="text" class = "distance" style="width: 44px; "> km 내의 충전소
                <br>
                <button onclick="getData()" >찾기</button>
                <button onclick="removeMarkers()" >숨기기</button>
                </div>

우선 html 안에 반경 몇 km를 보고싶은지 작성할 수 있는 input text 와 찾기와 숨기기 기능을 하는 함수를 연결하는 버튼을 만들었다.

 

 

//현재위치 불러내는 api?
                    navigator.geolocation.getCurrentPosition(function (position) {
                        const lat = position.coords.latitude;
                        const lng = position.coords.longitude;
                        createMap(lat, lng);
                        createMarker5(lat,lng);
                        
                    });
                    function createMap(lat, lng) {
                        const container = document.getElementById('map');
                        const options = {
                            center: new kakao.maps.LatLng(lat, lng),
                            level: 6
                        };
                        map = new kakao.maps.Map(container, options);
                    }

                    function getData() {
                        navigator.geolocation.getCurrentPosition(function (position) {
                            const lat = position.coords.latitude;
                            const lng = position.coords.longitude;
                            fetch('/tetest/data')
                                .then(response => response.json())
                                .then(data => {
                                    data.forEach(v => {
                                        const stationlat = v.latitude;
                                        const stationlng = v.longitude;


                                        let distancesArray = [];
                                        let distanceInKm = getDistanceFromLatLonInKm(lng, lat, stationlng, stationlat);
                                        const distance = document.querySelector('.distance').value;
                                        if (distanceInKm <= distance) {
                                            createMarker(stationlat, stationlng);
                                        }
                                    });
                                })

                        }
                        );
                    }
                    function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {
                        var R = 6371; // Radius of the earth in km
                        var dLat = deg2rad(lat2 - lat1);  // deg2rad below
                        var dLon = deg2rad(lon2 - lon1);
                        var a =
                            Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                            Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
                            Math.sin(dLon / 2) * Math.sin(dLon / 2)
                            ;
                        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
                        var d = R * c; // Distance in km
                        return d;
                    }
                    function deg2rad(deg) {
                        return deg * (Math.PI / 180)
                    }

                    function createMarker(lat, lng) {
                        const markerPosition = new kakao.maps.LatLng(lat, lng);
                        var imageSrc = 'https://cdn-icons-png.flaticon.com/512/7512/7512521.png', // 마커이미지의 주소입니다    
                            imageSize = new kakao.maps.Size(50, 52), // 마커이미지의 크기입니다
                            imageOption = { offset: new kakao.maps.Point(27, 69) }; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
                        // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
                        var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
                        const marker = new kakao.maps.Marker({
                            position: markerPosition,
                            image: markerImage
                        });
                        const mark = {
                            marker: marker,
                            add : 1
                        }
                        console.log(mark);

                        markers.push(mark);
                        marker.setMap(map);
                    }
                    function createMarker5(lat, lng) {
                        const markerPosition = new kakao.maps.LatLng(lat, lng);
                        var imageSrc = 'mini.png', // 마커이미지의 주소입니다    
                            imageSize = new kakao.maps.Size(50, 52), // 마커이미지의 크기입니다
                            imageOption = { offset: new kakao.maps.Point(27, 69) }; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
                        // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
                        var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
                        const marker = new kakao.maps.Marker({
                            position: markerPosition,
                            image: markerImage
                        });
                        
                        markers.push(marker);
                        marker.setMap(map);
                    }

그 후 원래 있던 반경에 따라 마커를 생성하는 코드에서 

현재 위치의 마커가 생성되는 createMarker 5는 그대로 페이지를 열었을때 기본값으로 생성되어 있게 하고

 input 의 id '.distance'로 지정한 반경 km를 document.querySelector 로 찾아서 원래 직접 지정했던 숫자 위치에 넣어주었다.

 

function removeMarkers() {

                        markers.forEach(mark =>{
                            const marker = mark.marker;
                            if(mark.add==1){
                                console.log(mark.add);
                                marker.setMap(null); // 지도에서 제거
                            }
                            

                        });
                         
                    }

생성된 반경 마커가 사라지게하는 것이 문제였는데 그냥 marker.setMap(null)로 주면 marker가 undifined 되었다는 오류가 발생한다. 그래서 marker를 mark라는 큰 틀로 포장해서 add :1 이라는 의미없는 값을 넣어주어 add :1로 구분하여 마커를 제거할 수 있도록 하였다. 

 

1km 로 반경을 주고 찾기를 누른 결과이다. 

미니언즈가 있는 곳이 바로 현재 위치

1km 이내의 전기차 충전소를 보여주는 번개 모양 마커가 있다.

 

반경 5km 이내의 전기차 충전소를 찾기 한 결과이다.