우선 나는 java와 javascript 2가지를 따로따로 불러오는걸 해보았다
이 말은 각각 호출을 하는 방법을 만들었다
javascript는 전체적으로 다올렸고
java로 하는 부분은 그냥 데이터만 들어왔는지 확인하는거까지 진행하였다
이렇게 호출해놓고 javascript로 jsp로 띄워줄수있다!
@Controller
public class AddressController {
private final Logger logger = LoggerFactory.getLogger(this.getClass());
@GetMapping("/address")
public @ResponseBody String AddressTranslation(/*String lat, String lng, HttpServletRequest request*/) throws Exception {
logger.info("AddressTranslation: ");
String apikey = Key.address;
String searchType = "BOTH"; // BOTH(둘다), PARCEL(지번), ROAD(도로명)
String point = "127.101313354,37.402352535"; // lng(경도), lat(위도)
String epsg = "epsg:4326";
String type = "json";
String simple = "false";
String zipcode = "true";
StringBuilder urlBuilder = new StringBuilder("https://api.vworld.kr/req/address");
urlBuilder.append("?service=address");
urlBuilder.append("&version=2.0");
urlBuilder.append("&request=getaddress");
urlBuilder.append("&key=" + apikey); // 서비스키
urlBuilder.append("&type=" + searchType); // 주소 유형
urlBuilder.append("&point=" + point); // lng(경도), lat(위도)
urlBuilder.append("&crs=" + epsg); // 좌표계
urlBuilder.append("&format=" + type); // json, xml
urlBuilder.append("&simple=" + simple); // 응답결과
urlBuilder.append("&zipcode=" + zipcode); // 우편번호 출력여부
URL url = new URL(urlBuilder.toString());
logger.info("urlBuilder.toString(): " + urlBuilder.toString());
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
conn.setRequestMethod("GET");
conn.setRequestProperty("Content-type", "application/json");
logger.info("Response code: " + conn.getResponseCode());
BufferedReader rd;
if (conn.getResponseCode() >= 200 && conn.getResponseCode() <= 300) {
rd = new BufferedReader(new InputStreamReader(conn.getInputStream()));
} else {
rd = new BufferedReader(new InputStreamReader(conn.getErrorStream()));
}
StringBuilder sb = new StringBuilder();
String line;
while ((line = rd.readLine()) != null) {
sb.append(line);
}
rd.close();
conn.disconnect();
logger.info("sb.toString(): "+sb.toString());
JSONObject ret = new JSONObject();
ret.put("list", sb);
logger.info("ret.toString(): "+ret.toString());
return ret.toString();
}
}
자바스크립트를 독점적으로 파서.. 이게 분량이 더 많다
전에 만들어준 leflet 지도와 그때 같이 넣어두었던
위도/경도 실시간으로 보여줬던 js를 같이 사용 할 것이다.
var nConytol; // 변수 설정 해주기
L.control.mousePosition().addTo(mymap); // 이렇게 넣어줬던 코드를
nConytol = L.control.mousePosition().addTo(mymap); // 이렇게 변경해준다
코드를 변경해주고 이제 수정을 들어가볼건데
api_address();
이렇게 함수를 선언해넣어주자
function api_address() {
mymap.on('mousemove', function(e ) { // mousemove, mouseup, mousedown
//console.log(e._container);
const lng = e.latlng.lng.toFixed(5);
const lat = e.latlng.lat.toFixed(5);
$.ajax({
type: "get",
url: "https://api.vworld.kr/req/address?service=address&request=getAddress&version=2.0&crs=epsg:4326&format=json&type=both&zipcode=true&simple=false",
dataType : "jsonp",
data : {
point: lng+","+lat,
key: '${key_address}'
},
async: true,
success: function(data) {
/*
여기에 코드 새롭게 추가!!!
국내 외에 다른지역을 찍을경우 오류코드,
도로명이 없는경우에는 지번으로 뜨게 했다
*/
try {
if(data.response.status == "NOT_FOUND"){
var prefixAndValue = "정보를 찾을 수 없는 지역입니다";
nConytol._container.innerHTML = prefixAndValue;
}else if(data.response.result.length < 2){
var prefixAndValue = data.response.result[0].text; // 지번주소
nConytol._container.innerHTML = prefixAndValue;
}else {
var prefixAndValue = data.response.result[1].text; // 도로명주소
nConytol._container.innerHTML = prefixAndValue;
}
}catch (err){
console.log(err, '에러 발생');
}
},
error: function(xhr, status, error) {
console.log(xhr, status, error);
}
});
}
그리고 이제 위도경도.js에 들어가서 L.Control.MousePosition 참고문서
_onMouseMove: function (e) {
var lng = this.options.lngFormatter ? this.options.lngFormatter(e.latlng.lng) : L.Util.formatNum(e.latlng.lng, this.options.numDigits);
var lat = this.options.latFormatter ? this.options.latFormatter(e.latlng.lat) : L.Util.formatNum(e.latlng.lat, this.options.numDigits)
var value = this.options.lngFirst ? lng + this.options.separator + lat : lat + this.options.separator + lng;
var prefixAndValue = this.options.prefix + ' ' + value;
// this._container.innerHTML = prefixAndValue; // 위도/경도 마우스위치 숨기려면 이거 주석처리
}
});
맨 아래 저 부분을 주석처리를 해주면
원래 위도:경도가 떴던 부분에 주소가 뜨게된다!
mymap.on('mousemove', function(e )
클릭할때마다 나오게 하고싶다! 하면 이 부분을 mousedown이거로 바꿔주면 된다.
마우스 움직일때마다 찾게 했더니 하루 트래픽을 모두 써버려서.. 바꾸는걸 추천!
주소가 도로명이 안나오는 주소도 되게 많아서 없으면 지번주소가 나오게 해두기도 하였다!
--> 건물을 누르면 도로명이 나오고 길을 누르면 지번이 나옴