File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %><section class="sub">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<head>
<meta charset="utf-8">
<script src="/publish/js/jquery-3.5.0.js"></script>
<title>클릭한 위치에 마커 표시하기</title>
</head>
<body>
<div class="content"><!-- heading(공통) -->
<div class="heading"></div>
<div class="subCont">
<div class="mapWrap">
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=07d7ecaf764d1a53f41cc3f27134256e&libraries=services"></script>
<input type="text" id="sample5_address" placeholder="주소">
<input type="button" onclick="sample5_execDaumPostcode()" value="주소 검색"><br>
<button type="button" onclick="insertajax();">전송</button>
<div id="map" style="width:1200px;height:450px;"> </div>
<div class="mapInfo">
문자전송 화면에 추가되는 영역<input type="text" id="testarea" value="" style="width:600px;height:200px;"/>
ajax로 받아온 url <input type="text" id="urlarea" value="" style="width:600px;height:200px;"/>
</div>
</div>
</div>
</div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(37.537187, 127.005476), // 지도의 중심좌표
level: 5 // 지도의 확대 레벨
};
//지도를 미리 생성
var map = new daum.maps.Map(mapContainer, mapOption);
//주소-좌표 변환 객체를 생성
var geocoder = new daum.maps.services.Geocoder();
//마커를 미리 생성
var marker = new daum.maps.Marker({
position: new daum.maps.LatLng(37.537187, 127.005476),
map: map
});
//lat 위도 lng 경도
var paramLat;
var paramLng;
function sample5_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
var addr = data.address; // 최종 주소 변수
// 주소 정보를 해당 필드에 넣는다.
document.getElementById("sample5_address").value = addr;
// 주소로 상세 정보를 검색
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);
// 마커를 결과값으로 받은 위치로 옮긴다.
marker.setPosition(coords)
paramLat = result.y;
paramLng = result.x;
}
});
}
}).open({
q: document.getElementById("sample5_address").value
});
}
function insertajax(){
$.ajax({
cache : false,
url : "<c:url value='/MapUrlInsertAjax.do' />",
type : 'POST',
data : {
"mapLat" : paramLat,
"mapLng" : paramLng
},
dataType:'json',
success : function(returnData, status){
if(status == "success") {
if (returnData.url != 0) {
document.getElementById("testarea").value = returnData.url + "/MapUrl.do?seq=" + returnData.seq;
}
}else{ alert("ERROR!");return;}
},
error : function(request , status, error){
alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
});
}
</script>
</body>