반응형 카카오지도6 javascript 수선의 발 구하는 방법, 직선과 점의 가장 가까운 점 구하는 방법, 폴리라인과 마커간 최단거리 javascript 수선의 발 구하는 방법, 직선과 점의 가장 가까운 점 구하는 방법, 폴리라인과 마커간 최단거리 이번 포스팅은 수학적인 지식이 약간은 필요합니다. 수선의 발(foot of perpendicular) 이란 수선과 직선 또는 평면이 만나는 점을 뜻하며, 한 점에서 직선 또는 평면에 대해 수선을 그었을 때 만나는 점을 의미합니다. 간단히 직선과 점을 이은 수선의 각이 90도가 되는 점을 의미합니다. (점과 직선과의 최단거리) 아래의 이미지 처럼 검은색 두 점을 연결한 직선과 파란색 점을 연결하였을 때 직각이 되는 빨강색 점을 수선의 발이라고 합니다. 이제 이 수선의 발을 구하는 공식을 사용하여 카카오 지도에 표시해 보도록 하겠습니다. 저의 경우 링크와(폴리라인) 정류소(마커) 사이의 최단거리.. Programing/JavaScript 2021. 9. 28. 카카오 지도 보이는 영역 내 마커만 표출 방법 카카오 지도 보이는 영역 내 마커만 표출 방법 카카오 지도에서 보이는 영역 내 마커만 표출하는 방법을 알아보도록 하겠습니다. 보통 지도 내 표출해야 될 마커의 개수가 많을 경우 브라우저의 성능이 현저히 떨어지기 때문에 지도 레벨과 영역에 따라 표출할 마커를 다르게 설정합니다. 카카오 지도의 레벨 변경 감지 이벤트는 아래와 같이 추가 할 수 있습니다. kakao.maps.event.addListener(MAP, "zoom_changed", function() { //do something.. }); 콜백 함수 내에서는 this.getLevel() 을 통해 현재 레벨 값을 구할 수 있습니다. 예를 들어 3 레벨 이하일 경우에만 지도 영역 내 모든 정보를 가져오는 코드를 작성해보겠습니다. kakao.maps... Programing/JavaScript 2021. 9. 2. customoverlay를 활용한 kakaomap marker 회전 마커회전 customoverlay를 활용한 kakaomap marker 회전 마커회전 기존의 마커 속성에 접근하여 마커를 회전하는 방법은 아래의 link를 참고하세요. link : https://aljjabaegi.tistory.com/321 다음지도 마커 회전하기, 이미지 회전, 방위각 적용 다음지도 마커 회전하기, 이미지 회전, 방위각 적용 다음지도에 자동차 마커가 올라가는데 방위각에 따라서 회전해 달라는 요청을 받았습니다. 그런데 다음지도 도큐먼트에는 마커를 회전하는게 나와있지 않아, 마.. aljjabaegi.tistory.com 위의 방법은 단점이 있습니다. 카카오맵쪽에서 마커 회전에 대한 API를 제공하지 않기때문에, 내부 오브젝트의 이미지 변수명이 바뀌게 되면 동작하지 않게되죠. 매번 오브젝트의 변수.. Programing/JavaScript 2020. 2. 24. 카카오 지도 API 키 발급받는 방법, 2019년 다음지도 사용 불가 카카오 지도 API 키 발급받는 방법 2018년 12월 31일 부로 Daum 지도 API 사용은 중지되고, Kakao 맵 API 만 사용이 가능하게 됩니다. 그리하여 이전에 Daum 에서 발급받은 키와 주소를 Kakao 지도 것으로 변경을 해주셔야 정상적으로 지도가 표출 되게 됩니다. 기존 주소 : https//apis.daum.net/maps/maps3...... 변경 주소 : https//dapi.kakao.com/v2/map….. 그럼 카카오 개발자 페이지로 이동해 지도 표출에 필요한 키를 발급받는 방법을 알아보도록 하겠습니다. 카카오 개발자 페이지로 이동합니다. https://developers.kakao.com/ 우측 상단 로그인을 눌러 로그인하시거나 회원가입 후 로그인을 합니다. 로그인이 완료.. Programing/API 2018. 10. 30. 다음지도 API 사용시 'daum' 이(가) 정의되지 않았습니다. 에러 해결방법. 다음지도 API 사용시 'daum' 이(가) 정의되지 않았습니다. 에러 해결방법. 'daum' 이(가) 정의되지 않았습니다. Uncaught ReferenceError: daum is not defined 에러 해결 방법. localhost 에서는 이상없이 출력되던 지도가 서버에 올려보니 갑자기 저런 에러를 내면서 출력되지 않았습니다. 스크립트는 분명 존재하는데 api 가 제대로 호출 되지 않은 것입니다. 해서 해당 주소를 날려보니 이런 json 이 날라오더군요. API 키가 매치되는 등록된 어플이 없다. 근데 왜 로컬에선 될까요?.. (글쎄요...) 그래서 우선 카카오 디벨로퍼스로 이동해 키를 확인했습니다. 그랬더니 4개의 키가 존재 하더군요. 네이티브 앱 키 : IOS/Android SDK 에서 AP.. Programing/API 2017. 10. 19. 다음지도 마커 회전하기, 이미지 회전, 방위각 적용 다음지도 마커 회전하기, 이미지 회전, 방위각 적용 다음지도에 자동차 마커가 올라가는데 방위각에 따라서 회전해 달라는 요청을 받았습니다. 그런데 다음지도 도큐먼트에는 마커를 회전하는게 나와있지 않아, 마커를 생성하면서 해당 마커의 이미지 css의 transform을 사용하여 회전하였습니다. 1 2 3 4 5 6 7 8 9 10 11 for (var j in markerArray){ var marker = new daum.maps.Marker({ map: map, position: markerArray[j].latlng, title : markerArray[j].title, image : iconImage }); $(marker.Na).css('transform',''); $(marker.Na).css('.. Programing/API 2017. 9. 22. 이전 1 다음 💲 추천 글 반응형