지오로케이션위치로부터 1km 3km 5km 전체 위치 표시하기

카카오맵 API (지도/로컬)
2

마커를 배열로 관리하고 라디오 버튼이 눌렸을 때
지도의 중심 좌표와 마커들 간의 거리를 비교해서 범위 안에 있는 마커를 표시해주세요.

아래 링크와 코드 함께 참고해주세요.

https://devtalk.kakao.com/t/topic/84191/6?u=lea.ju

<body>
    <div id="map" style="width:100%;height:350px;"></div>

    <button onclick="showMarker(1000)">1km</button>
    <button onclick="showMarker(3000)">3km</button>
    <button onclick="showMarker(5000)">5km</button>
    <button onclick="showMarker(100000)">모두보기</button>

    <script>
        var mapContainer = document.getElementById('map'), // 지도를 표시할 div
        mapOption = {
            center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
            level: 7 // 지도의 확대 레벨
        };

        // 지도를 생성합니다
        var map = new kakao.maps.Map(mapContainer, mapOption);

        var current = new kakao.maps.Marker({
            map: map,
            position: new kakao.maps.LatLng(33.450701, 126.570667)
        });

        // 주소-좌표 변환 객체를 생성합니다
        var geocoder = new kakao.maps.services.Geocoder();
        var add = ['제주특별자치도 제주시 첨단로 242', '제주특별자치도 제주시 명림로 575-107', '제주특별자치도 제주시 516로 2870', '제주특별자치도 제주시 한북로 313'];
        var markers = [];
        for(let i=0; i <add.length; i++){
        geocoder.addressSearch(add[i], 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
                });

                markers.push(marker);
            }
        });
    }

    var circle = new kakao.maps.Circle({});

    function showMarker(radius) {
        var center = map.getCenter();
        var line = new kakao.maps.Polyline();

        if(radius < 100000) {
            circle.setMap(map);
            circle.setPosition(center);
            circle.setRadius(radius);
        } else {
            // 전체보기
            circle.setMap(null);
        }

        markers.forEach(marker => {
            var path = [marker.getPosition(), center];
            line.setPath(path);

            // 마커와 원의 중심 사이의 거리
            var dist = line.getLength();

            // 이 거리가 원의 반지름보다 작거나 같다면
            if (dist <= radius) {
                // 해당 marker는 원 안에 있는 것
                marker.setMap(map);
            } else {
                marker.setMap(null);
            }
        });
    }
    </script>
1개의 좋아요