카카오지도 관련 질문 드립니다.
본문
카카오지도를 만들면서 주소를 좌표로 변환하고 지도로 표시해 주어야 하는데 어려움을 겪고 있습니다.
카카오api를 뒤적이다가 로컬이라는 부분을 잃어 보았는데요
아래부분은 카카오지도 만들때 어떻게 활용 하라는건지 이해가 안가서 질문 드립니다.
고수님들 조금이라도 도움이 될만한 조언 좀 부탁 드립니다.
주소검색
주소를 지도 위에 정확하게 표시하기 위해 해당 주소의 좌표 정보를 제공하는 API로 주소에 해당하는 지번 주소, 도로명 주소, 좌표, 우편번호, 빌딩명 등의 다양한 정보를 함께 제공합니다. 애플리케이션(이하 앱) REST API 키를 헤더에 담아 GET으로 요청합니다. 원하는 검색어와 함께 결과 형식 파라미터의 값을 선택적으로 추가할 수 있습니다. 이 API는 지번 주소, 도로명 주소 모두 지원합니다.
응답은 JSON과 XML 형식을 지원합니다.
Request
URL
GET /v2/local/search/address.{format} HTTP/1.1
Host: dapi.kakao.com
Authorization: KakaoAK {REST_API_KEY}
Parameter
| Name | Type | Description | Required |
|---|---|---|---|
| query | String |
검색을 원하는 질의어 | O |
| page | Integer |
결과 페이지 번호, 1-45 사이, 기본 값 1 | X |
| AddressSize | Integer |
한 페이지에 보여질 문서의 개수, 1-30 사이, 기본 값 10 | X |
답변 4
위의 이런 내용 필요없고 지난번 질문에서 사용한 소스만 잇으면 됩니다
제 답변내용에서 address라고 수정한 곳에 주소를 넣으면 좌표를 가져옵니다
현재 어디까지 테스트 되어있는가요?
key를 받아서 소스에 적용하여 직접입력한 주소의(address 자리) 지도가 나오는 것까지는 제대로 되는가요?
지난번 소스에서는 jquery 호출하는 주소가 잘못되어 작동 안하던데요
오늘까지 2주째 이러고 있네요 ㅠ 일단 key받아서 뷰페이지에 지도 넣고 출력되는데요
주소입력 필드가(wr_1)인데 읽어드리질 못해요 그래서 모두 원래 처음 카카오api에서 긁어온 소스로 원상복구 하고 이부분만 이렇게 넣었어요 // 주소로 좌표를 검색합니다
geocoder.addressSearch(wr_1,function(result, status) {
그런데 소용이 없네요 ㅠㅠ 요며칠세 10년은 늙는거 같아요ㅋㅋ
균이님 감사합니다 "보여주네요 ㅋㅋ"그런데 마커(주소지)가 중앙으로 안오고
오른쪽에 위치하네요 일단 보여주는것은 성공이네요"꾸벅"
그누보드 기본 사용법을 알아야 뭔가를 만들 수 있을텐데요
view페이지에서 wr_1에 들어 있는 값은 $view[wr_1] 입니다
아래처럼 하세요
geocoder.addressSearch("<?=$view['wr_1']?>", function(result, status) {
이렇게해서 안나온다면 소스보기하여 저 위치에 제대로 주소가 나오는지 확인해보세요
안녕하세요 균이님 죄송하지만 제 질문한번만 봐주세요"꾸벅"
https://sir.kr/qa/380288?page=1&posting=ok&page=1
주소변환 기능을 사용하기 위해서는 라이브러리를 추가해야 가능한 것으로 알고 있습니다.
라이브러리 추가는 지도api 주소 마지막에 &libraries=services를 추가하면 됩니다.
참고 부탁드립니다.
<meta charset="utf-8">
<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=7255e81b3c372da4cf15181d597c974c&libraries=services"></script>
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<input type="text" id="address" style="width: 300px;">
<button type="button" id="getAddress">주소 갖고 오기</button>
<div id="map" style="width: 100%; height: 500px; display: none;"></div>
<script>
const geocoder = new kakao.maps.services.Geocoder();
$("#getAddress").on("click", function() {
new daum.Postcode({
oncomplete: function(data) {
$("#address").val(data.address);
geocoder.addressSearch(data.address, function(result, status) {
if(status === kakao.maps.services.Status.OK) {
const mapContainer = $("#map")[0],
mapOption = {
center: new kakao.maps.LatLng(result[0].y, result[0].x),
level: 3
};
const map = new kakao.maps.Map(mapContainer, mapOption);
$("#map").toggle(function() {
window.setTimeout(function() {
map.relayout();
}, 0);
});
}
});
}
}).open();
});
</script>
주소를 입력하고 나서 주소가 검색되면 바로 지도를 보이길 원하시는 건가요?
맞는지는 모르겠지만...
네 맞아요 글쓰기 창에서 회원이 글쓰고 주소를 입력하면 뷰페이지에 카카오지도로
보여주길 원하는 거에요
