특정 마커 기준 10km이내에 존재하는 내역 배열 담기

카카오맵 API (지도/로컬)
,
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610

$(function(){
	var myXMap = $("#myXMap").val();	// 내 가맹점 x좌표
	var myYMap = $("#myYMap").val();	// 내 가맹점 y좌표
	var myAddr = $("#myAddr").val();		// 내 가맹점 주소
	var myFrcsName = $("#myFrcsName").val();	// 내 가맹점 이름
	var myFrcsId = $("#myFrcsId").val();	// 내 가맹점 아이디
	
	var otherFrcsInfo = [];	// 내 가맹점이 아닌  다른 가맹점 정보 담을 배열
	var markers = [];	// 마커를 저장할 배열	
	var nearList = [];	// 근처 가맹점을 담을 배열
	
	var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
	mapOption = {
        center: new kakao.maps.LatLng(myXMap, myYMap), // 지도의 중심좌표
        level: 8 // 지도의 확대 레벨
    };  

	// 지도를 생성합니다
	var map = new kakao.maps.Map(mapContainer, mapOption); 
	
	// 내 가맹점 마커 표시
	addMarker(new kakao.maps.LatLng(myXMap, myYMap));

	function addMarker(position) {
	    var imageSrc = "${pageContext.request.contextPath }/resources/assets/img/marker.png";
	    var imageSize = new kakao.maps.Size(58, 71); // 마커 이미지의 크기
	    var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
	    var marker = new kakao.maps.Marker({
	        position: position, // 마커의 위치
	        image: markerImage
	    });

	    marker.setMap(map); // 지도 위에 마커를 표출합니다
	    markers.push(marker);	// 배열에 생성된 마커를 추가
	    return marker;
	}
			
	// 중심점에서 반경 10km 이내의 원형 영역 그리기
	var circle = new kakao.maps.Circle({
	    center: new kakao.maps.LatLng(myXMap, myYMap), // 중심 좌표 설정
	    radius: 10000, // 미터단위
	    strokeWeight: 3, // 선의 두께 설정
	    strokeColor: '#75B8FA', // 선의 색깔 설정
	    strokeOpacity: 0.4, // 선의 불투명도 설정
	    fillColor: '#CFE7FF', // 채우기 색깔 설정
	    fillOpacity: 0.3 // 채우기 불투명도 설정
	});
	
	// 원형 영역 지도에 추가
	circle.setMap(map);
	
	
	// 모든 가맹점 정보 가져오기
	$.ajax({
		type : "post",
		url : "/owner/allFrcsList.do",
		beforeSend : function(xhr){	// csrf토큰 보내기 위함
			xhr.setRequestHeader("${_csrf.headerName}", "${_csrf.token}");	//key value로 보낸다.
		},
		success : function(res){
			// 반경 10km 안에 있는 가맹점은 가맹점코드를 따로 배열에 저장하기 > 리스트로 출력해줘야해서...	
			var radius = 10000; // 10km 반경 (미터)
			var nearList = [];
			
			for(var i=0; i<res.length; i++){
				var otherXMap = res[i].frcsXmap;				
				var otherYMap = res[i].frcsYmap;				
				var otherFrcsName = res[i].frcsName;				
				var otherFrcsId = res[i].frcsId;				
				
				// 내 가맹점 빼고 배열에 넣기
				if(otherFrcsId !== myFrcsId){
					var otherInfo = {
						otherXMap : otherXMap, 
						otherYMap : otherYMap, 
						otherFrcsName : otherFrcsName, 
						otherFrcsId : otherFrcsId
					};
					otherFrcsInfo.push(otherInfo);
					
					for(var j=0; j<otherFrcsInfo.length; j++){
					 	var otherXMap = otherFrcsInfo[j].otherXMap;
					    var otherYMap = otherFrcsInfo[j].otherYMap;
					    var otherFrcsId = otherFrcsInfo[j].otherFrcsId;
						
					    // 내 가맹점 근처 10km 이내에 있는 가맹점들을 nearList에 담는다.
					    
						// 모든 가맹점 마커 찍기
						addMarker(new kakao.maps.LatLng(otherXMap, otherYMap));
					}
				}
			}
		}
	});
});

내 가맹점 기준 10km이내 반경 원을 그리는거는 성공했습니다.
근데 10km이내에 있는 내역들만 따로 담으려고하니 담기지 않네요…
(이전 작성한 코드 밑에 있습니다.)

    // 내 가맹점 빼고 배열에 넣기
            if(otherFrcsId !== myFrcsId){
               var otherInfo = {
                  otherXMap : otherXMap, 
                  otherYMap : otherYMap, 
                  otherFrcsName : otherFrcsName, 
                  otherFrcsId : otherFrcsId
               };
               otherFrcsInfo.push(otherInfo);
               
               for(var j=0; j<otherFrcsInfo.length; j++){
                   var otherXMap = otherFrcsInfo[j].otherXMap;
                   var otherYMap = otherFrcsInfo[j].otherYMap;
                   var otherFrcsId = otherFrcsInfo[j].otherFrcsId;

                   var c1 = new kakao.maps.LatLng(myXMap, myYMap); // 내 가맹점의 위치 좌표
                   var c2 = new kakao.maps.LatLng(otherXMap, otherYMap); // 다른 가맹점의 위치 좌표

                   var distance = kakao.maps.service.geometry.getDistance(c1, c2);
                  
                   console.log(distance)
                  
                  if(radius > distance){
                     nearList.push(otherFrcsId);
                      marker.setMap(null);
                  }
                  console.log(nearList);
                  
                  // 마커 찍기
                  addMarker(new kakao.maps.LatLng(otherFrcsInfo[j].otherXMap, otherFrcsInfo[j].otherYMap));

kakao.maps.service.geometry.getDistance(c1, c2); 이게 안되더라구요…
어떻게 해야 배열에 담을 수 있을까요?ㅠ

2

말씀주신 kakao.maps.service.geometry.getDistance API는 제공하고 있지 않습니다.
두 좌표의 거리는 Polyline의 getLength() API를 이용해서 구할 수 있습니다.
거리를 구할 두 지점의 좌표를 path로 설정해서 getLength()로 구한 길이를 활용해주세요.
https://apis.map.kakao.com/web/documentation/#Polyline

let polyline = new kakao.maps.Polyline();
polyline.setPath([내 가맹점 좌표, 다른 가맹점 좌표]); // 길이를 구할 좌표로 path를 구성해주세요.
console.log(polyline.getLength()); // polyline의  총 길이 출력

그리고 원 안에 포함된 마커 정보를 얻는 방법은 아래 코드 참고해주세요.

let markers = [ marker1, marker2, .... ];
let circle = new kakao.maps.Circle(options);
let center = circle.getPosition();
let radius = circle.getRadius();
let line = new kakao.maps.Polyline();

markers.forEach(function(marker) {
    // 마커의 위치와 원의 중심을 경로로 하는 폴리라인 설정
    let path = [ marker.getPosition(), center ];
    line.setPath(path);

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

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

감사합니다!!

1개의 좋아요