안녕하세요… 지도 api 사용중입니다.
글쓰기 페이지에서 주소입력은 잘 되고 있습니다. 여기에서 입력된 주소의 위치로 좌표가 이동이 되어야 하는데 이동이 되지 않고
있습니다. 어떻게 해야 하는지 고수님들의 해결방법 및 조언 부탁드리겠습니다.
주소검색부분을 팝업창으로 오픈했을경우에는 주소입력후 좌표로 이동을 하지만, 레이어 형태로 오픈했을 때는 주소입력후 좌표로 이동 하지 않습니다.
write.skin.php 주소입력부분
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<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>
<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>
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>