글쓰기에서 주소등록후 좌표이동 문의
본문
안녕하세요… 카카오 api 사용중입니다.
글쓰기 페이지에서 주소입력은 잘 되고 있습니다. 여기에서 입력된 주소의 위치로 좌표가 이동이 되어야 하는데 이동이 되지 않고 있습니다.
주소검색부분을 팝업창으로 오픈했을경우에는 주소입력후 좌표로 이동을 하지만, 레이어 형태로 오픈했을 때는 주소입력후 좌표로 이동 하지 않습니다.
어떻게 해야 하는지 고수님들의 해결방법 및 조언 부탁드리겠습니다.
write.skin.php 주소입력부분
<tr>
<th scope="row">주 소</th>
<td colspan="3">
<label for="wm_zip" class="sound_only">우편번호</label>
<input type="text" name="wr_2" value="<?php echo $wr_2 ?>" id="wr_2" class="zip_input wm_input required read" size="5" maxlength="6" readonly required>
<button type="button" class="zip_btn" onclick="win_zip('fwrite', 'wr_2', 'wr_3', 'wr_4', 'wr_8', 'wr_9');">주소 검색</button><br />
<input type="text" name="wr_3" value="<?php echo $wr_3 ?>" id="wr_3" class="wm_input frm_address required read" placeholder="기본주소" style="width:33%" readonly required>
<input type="text" name="wr_4" value="<?php echo $wr_4 ?>" id="wr_4" class="wm_input frm_address" placeholder="상세주소" style="width:33%" >
<input type="text" name="wr_8" value="<?php echo $wr_8 ?>" id="wr_8" class="wm_input frm_address read" placeholder="참고항목" readonly style="width:32%" >
<input type="hidden" name="wr_9" value="<?php echo $wr_9 ?>">
</td>
</tr>
script 부분
<!-- API { -->
<tr>
<td colspan="4" class="cont_td">
<div style="background-color:#f9f9f9; width:100%; margin-top:5px; height:425px; border-radius:4px;" id="map"></div>
<input type="hidden" name="wr_5" value="<?php echo $write['wr_5']; ?>" id="wr_5" class="frm_input winp" readonly>
<input type="hidden" name="wr_6" value="<?php echo $write['wr_6']; ?>" id="wr_6" class="frm_input winp" readonly>
<div id="clickLatlng"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<?php echo $board['bo_1'] ?>&libraries=services"></script>
<!-- } -->
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(<?php echo $write['wr_5']?>, <?php echo $write['wr_6']?>), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성
var map = new daum.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체 생성
var geocoder = new daum.maps.services.Geocoder();
// 마커
var marker = new daum.maps.Marker({
map: map,
// 지도 중심좌표에 마커를 생성
position: map.getCenter()
});
// 주소검색 API (주소 > 좌표변환처리)
new daum.Postcode({
oncomplete: function(data) {
var addr = data.address; // 최종 주소 변수
//우편번호
document.getElementById('wr_2').value = data.zonecode;
// 주소 정보를 해당 필드에 넣는다.
document.getElementById("wr_3").value = addr;
document.getElementById("wr_4").value =data.bname+' : '+data.buildingName;
// 주소로 상세 정보를 검색
geocoder.addressSearch(data.address, function(results, status) {
// 정상적으로 검색이 완료됐으면
if (status === daum.maps.services.Status.OK) {
var result = results[0]; //첫번째 결과의 값을 활용
// 해당 주소에 대한 좌표를 받아서
var coords = new daum.maps.LatLng(result.y, result.x);
// 지도를 보여준다.
mapContainer.style.display = "block";
map.relayout();
// 지도 중심을 변경한다.
map.setCenter(coords);
// 좌표값을 넣어준다.
document.getElementById('wr_5').value = coords.getLat();
document.getElementById('wr_6').value = coords.getLng();
// 마커를 결과값으로 받은 위치로 옮긴다.
marker.setPosition(coords)
}
});
}
//마커를 기준으로 가운데 정렬이 될 수 있도록 추가
var markerPosition = marker.getPosition();
map.relayout();
map.setCenter(markerPosition);
</script>
</td>
</tr>
<!-- } API -->
답변 1
같은 파일 안에 레이어 팝업이 존재 할경우 데이터를 가져온다는 의미가 아닙니다.
즉, AJAX를 사용하여 지도를 띄울경우 문제 없이 될거라 생각합니다.
@toqurk 안녕하세요 답변 감사드립니다.
지도 표시 마커 표시 전부 다 정상작동합니다.
다만 주소검색후 검색된 해당주소지로 마커가 이동이 되어야 하는데 이동이 안되는거죠, 주소검색창을 일반 팝업창으로 오픈했을경우에는 마커가 해당주소지로 이동이 되는데 레이어로 호출 했을때는 마커가 이동이 안되어서 문의드린 것입니다.
어디에 문제가 있는건지 이리저리 해봐도 안되네요..ㅠㅠ
마커가 이동하려면 어떠한 액션이 필요할거 아닐까요?
웹 프로그램은 액션이 일어나야 동작을 하는 시스템입니다.
이미 지도를 불러오고 그걸 현재 페이지에서 오픈 해주는 방식을 사용하고 계시자나요?
제가 말씀드린것은 현재 주소 검색 하는 페이지 안에 레이어가 이미 코딩 되어잇는것이 아닌가 싶다는 겁니다.
그럴경우 호출을 하는것이 아닌 그냥 있는걸 띄우는 격이 되니 동작을 안하는거라 생각해서 말씀드린것입니다.
해당 레이어 영역에 특정 ID값을 넣고 그 안의 코딩은 ajax 의 다른 파일로 복사를 한뒤
그 값을 ajax로 호출해서 위에 언급한 특정 ID값의 .html() 로 값을 넣어보세요.
답변 감사합니다.. 쪽지 남겨드렸습니다.
즐거운 하루 되세요
