세미프로젝트 - AJAX를 이용한 지도 페이지 작성

 

function mapQuery(value){
	navigator.geolocation.getCurrentPosition(function(position) {
	    var lat = position.coords.latitude,
	        lon = position.coords.longitude;
	    $.ajax({ 
			type : "GET",
			url : "mapQ",
			data : {
				lat, lon, value
			},
			success : function (result) {
				$("#mapDiv").html(result);
			},
			error : function (e) {
				$("#mapDiv").html("에러<br>" + e);
			},
		});	
});
}

위 코드와 같이 value 값을 받고 AJAX를 통해 불러오는 함수를 만들어서 지도가 표시되게끔 했다.

위 캡쳐본이 이번에 만들고 있는 전기차 웹페이지이다.
이 페이지에서 왼쪽 상단에 위치한 셀렉트를 활용하여 서울특별시 xx구 에서 불러오기가 가능하게끔 만들것이다.

이를 통해 select에 검색 될 value값을 넣고
onchange를 사용하여 셀렉트가 바뀔때마다 지도가 불러와지게끔 했다.

AJAX를 사용한 이유는 찾으려고 셀렉트하는데
셀렉트 할 때 마다 페이지가 깜빡거리는 것은 사용자 경험에 안좋을 것으로 판단하여 AJAX를 활용하여 해당 문제를 해결했다.