-
- 로그인후 이용해주세요.
멤버십 자료실
구인구직 지도 마커 이동 지도 입력
<div class="rb_inp_wrap new_bbs_border_wrap section" id="section_3" style="display:none;">
<ul>
<h6 class="bbs_sub_titles font-B">근무지역</h6>
<label class="helps">근무지역을 입력하세요. 지도로 출력 됩니다.</label>
<li>
<input type="text" name="wr_3_ex[0]" value="<?php echo isset($wr_3[0]) ? $wr_3[0] : ''; ?>" id="wr_3_0" class="input w60 map_inp" placeholder="주소" readonly>
<input type="text" name="wr_3_ex[1]" value="<?php echo isset($wr_3[1]) ? $wr_3[1] : ''; ?>" id="wr_3_1" class="input w30 mobile_mt5" placeholder="나머지 주소">
</li>
<li class="mt-10">
<input type="text" name="wr_9" value="<?php echo isset($write['wr_9']) ? $write['wr_9'] : ''; ?>" id="wr_9" class="input w20" placeholder="광역시/도">
<input type="text" name="wr_10" value="<?php echo isset($write['wr_10']) ? $write['wr_10'] : ''; ?>" id="wr_10" class="input w20 mobile_mt5" placeholder="시/군/구">
<input type="hidden" name="wr_3_ex[2]" value="-" id="wr_3_2">
<input type="hidden" name="wr_3_ex[3]" value="-" id="wr_3_3">
<input type="hidden" name="wr_3_ex[4]" value="<?php echo isset($wr_3[4]) ? $wr_3[4] : ''; ?>" id="wr_3_4">
<input type="hidden" name="wr_3_ex[5]" value="<?php echo isset($wr_3[5]) ? $wr_3[5] : ''; ?>" id="wr_3_5">
</li>
<li class="mt-10">
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<?php echo $config['cf_kakao_js_apikey'] ?>&libraries=services"></script>
<div style="background-color:#f9f9f9; width:100%; height:200px; border-radius:10px;" id="map"></div>
<script>
var mapContainer = document.getElementById('map'),
mapOption = {
center: new kakao.maps.LatLng(<?php echo $wr_3[4] ?>, <?php echo $wr_3[5] ?>),
level: 3
};
var map = new kakao.maps.Map(mapContainer, mapOption);
var geocoder = new kakao.maps.services.Geocoder();
var marker = new kakao.maps.Marker({
map: map,
position: map.getCenter(),
draggable: true
});
// 마커 드래그 이벤트 처리
kakao.maps.event.addListener(marker, 'dragend', function() {
var position = marker.getPosition();
updateLocationInfo(position);
});
// 마커 클릭 이벤트 처리
kakao.maps.event.addListener(marker, 'click', function() {
var position = marker.getPosition();
updateLocationInfo(position);
});
// 위치 정보를 업데이트하는 함수
function updateLocationInfo(latlng) {
geocoder.coord2Address(latlng.getLng(), latlng.getLat(), function(result, status) {
if (status === kakao.maps.services.Status.OK) {
var detailAddr = !!result[0].road_address ? result[0].road_address.address_name : result[0].address.address_name;
document.getElementById('wr_3_0').value = detailAddr;
document.getElementById('wr_9').value = result[0].address.region_1depth_name;
document.getElementById('wr_10').value = result[0].address.region_2depth_name;
}
});
}
// 주소 입력란을 클릭하면 다음 주소 API 사용
$(function() {
$("#wr_3_0").on("click", function() {
new daum.Postcode({
oncomplete: function(data) {
$("#wr_3_0").val(data.address);
$("#wr_9").val(data.sido);
$("#wr_10").val(data.sigungu);
geocoder.addressSearch(data.address, function(results, status) {
if (status === kakao.maps.services.Status.OK) {
var result = results[0];
var coords = new kakao.maps.LatLng(result.y, result.x);
map.relayout();
map.setCenter(coords);
document.getElementById('wr_3_4').value = coords.getLat();
document.getElementById('wr_3_5').value = coords.getLng();
marker.setPosition(coords);
}
});
}
}).open();
});
});
// 지도가 리사이즈될 때 재정렬
$(window).on('resize', function () {
map.relayout();
map.setCenter(marker.getPosition());
});
</script>
</li>
</ul>
</div>
원래 있던
지도 따로 타이핑해서 검색하능 기능에
지도 마커를 드래그해서
지도 주소 나오겠금 해봤습니다.
소스 초보자라
도움이 되실지는 모르겠네요,,
수정위치는
/theme/rb.basic/skin/board/rb.recruit_bbs
white.skin.php 파일중간쯤 있습니다
활용하실분 쓰세요
[이 게시물은 리빌더님에 의해 2024-10-21 20:53:48 유저 자료실에서 이동 됨]
- 이전글구인구직 지도 마커 이동 지도 입력 22024.10.02
댓글목록
