지도/로컬 API에 대한 문의게시판입니다.
let addr_arr = []; //주소저장
let centerAddr = “”; //중심 주소(로그인한 사람)
let centerXY; // 중심 좌표
let xy_arr = []; //좌표저장
//로딩 시 회원목록의 주소를 가져와 배열에 저장한다.
$(document).ready(function(){
$.ajax({
url:'<c:url value="/findFriend/load" />',
dataType:'json',
type:'post',
async:false,
success:function(map){
var str;
$.each(map.memberList, function(i, element){
var str_img;
if(element.memGender == "남"){
console.log(element.memGender);
str_img = `<td width="50px"><img src="${pageContext.request.contextPath}/design/img/man.png" width="30px" height="30px"></td>`;
}
if(element.memGender == "여"){
str_img = `<td width="50px"><img src="${pageContext.request.contextPath}/design/img/woman.png" width="30px" height="30px"></td>`;
}
if(element.memId != '${sessionScope.user.userId}'){
str +=`<tr>`;
str += str_img;
str += `<td width="120px" id="find_id" height="20px"><span class="attend_list">\${element.memId}</span></td>
<td width="120px" height="20px"><span class="attend_list attend_list_dist">반경 0.8 km<span></td>
<td width="120px" height="20px"><span class="attend_list"><button class="member_view_button btn btn-primary">상세보기</button><span></td>
</tr>`;
}
//주소 저장
var memAddr = element.memRoadAddr;
addr_arr.push(memAddr);
if('${sessionScope.user.userId}' == element.memId){
centerAddr = element.memRoadAddr;
console.log(centerAddr);
}
}); //each
console.log("addr_arr",addr_arr);
$(".div_modal_attend_top + table").html(str);
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 6
};
var map = new kakao.maps.Map(container, options);
//주소 정보를 좌표로 반환
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
addr_arr.forEach(function(addr, index){
geocoder.addressSearch(addr, 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
});
// 인포윈도우로 장소에 대한 설명을 표시합니다
var infowindow = new kakao.maps.InfoWindow({
content: result[0].road_address.address_name,
disableAutoPan:true // 중심잡아주네..
});
infowindow.open(map, marker);
if(centerAddr != result[0].road_address.address_name){
console.log("몇번");
xy_arr.push({
x:result[0].x,
y:result[0].y
/* address:result[0].road_address.address_name */
});
}
if(centerAddr == result[0].road_address.address_name){
map.setCenter(coords);
// 지도에 표시할 원을 생성합니다=====================================================================
var circle = new kakao.maps.Circle({
center : coords, // 원의 중심좌표 입니다
radius: 3000, // 미터 단위의 원의 반지름입니다
strokeWeight: 3, // 선의 두께입니다
strokeColor: '#75B8FA', // 선의 색깔입니다
strokeOpacity: 1, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: 'dashed', // 선의 스타일 입니다
fillColor: '#CFE7FF', // 채우기 색깔입니다
fillOpacity: 0.4 // 채우기 불투명도 입니다
});
// 지도에 원을 표시합니다
circle.setMap(map);
center_XY = {
x:result[0].x,
y:result[0].y
};
} // if
if(index == 4){
xy_arr.forEach(function(location, index){
var linePath = [
new daum.maps.LatLng(center_XY.x, center_XY.y),
new daum.maps.LatLng(location.x, location.y),
];
var polyline = new daum.maps.Polyline({
path: linePath, // 선을 구성하는 좌표배열 입니다
strokeWeight: 3, // 선의 두께 입니다
strokeColor: '#FFAE00', // 선의 색깔입니다
strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: 'solid' // 선의 스타일입니다
}); // polyline
polyline.setMap(map);
console.log(polyline.getLength());
}); //forEach
} //if (index == 4)
} // if (status == ok)
}); //addressSearch
}); //for==========================for==========================for==========================for==========================for==========================for==========================
console.log(xy_arr);
//선그리기
//거리계산===========================================================================================
xy_arr.forEach(function(location, index){
var linePath = [
new daum.maps.LatLng(center_XY.x, center_XY.y),
new daum.maps.LatLng(location.x, location.y),
];
var polyline = new daum.maps.Polyline({
path: linePath, // 선을 구성하는 좌표배열 입니다
strokeWeight: 3, // 선의 두께 입니다
strokeColor: '#FFAE00', // 선의 색깔입니다
strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: 'solid' // 선의 스타일입니다
}); // polyline
polyline.setMap(map);
console.log(polyline.getLength());
}); // each
}, //success
error:function(){
alert("통신오류");
} //error
}); //ajax
});
위처럼 작성을 하던중,
중심좌표 설정도 잘되고 마커들도 전부다 잘 찍힙니다.
하지만 중심좌표를 기준으로 나머지 좌표에 전부 거리를 측정하기 위해 선을 그어 거리를 출력하는 부분에서 자꾸안되네요…
비동기통신이라 동시에 수행(?)되는 것 같은데…
어떻게하면 중심좌표를 기준으로 나머지 좌표와의 거리들을 구할 수 있을까요?