게시판 글쓰기 페이지에서 주소등록후 좌표이동 문의
본문
안녕하세요… 카카오 api 사용중입니다.
글쓰기 페이지에서 주소입력은 잘 되고 있습니다. 여기에서 입력된 주소의 위치로 좌표가 이동이 되어야 하는데 이동이 되지 않고 있습니다.
주소검색부분을 팝업창으로 오픈했을경우에는 주소입력후 좌표로 이동을 하지만, 레이어 형태로 오픈했을 때는 주소입력후 좌표로 이동 하지 않습니다.
어떻게 해야 하는지 고수님들의 해결방법 및 조언 부탁드리겠습니다.
write.skin.php 주소입력부분
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
//중간생략
<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>
function win_zip() {
new daum.Postcode({
oncomplete: function(data) {
var addr = data.address; // 최종 주소 변수
//중간생략
}).open();
}
위처럼 팝업형태로 오픈했을때는 주소입력시 해당주소지의 좌표로 마커가 정상이동 함.
아래처럼 레이어 형태로 했을때는 주소입력시 해당주소지의 좌표로 이동이 않됨.
다음 주소검색 스크립트를 적용했습니다.
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 -->
답변을 작성하시기 전에 로그인 해주세요.
